[uniapp] uniapp development app online Preview PDF file

1. You need to download a copy from the Internet pdf.js Put your files into your own project

2. except pdf.html file , Other files can be created pdf Folder , Put it under this directory , And then pdf Put the folder in the project static Under the table of contents ,pdf.html Also put it separately static Under the table of contents , Finally, as shown in the figure below ：

3. To achieve pdf preview , Need to use uniapp Of apiweb-view, Create a new one .vue file , Write the following code ：

<template>
  <view class="webView">
    <cu-custom isBack top :bgColor="NavBarColor">
      <block slot="content"> The online preview </block>
    </cu-custom>
    <web-view :src="urls"></web-view>
  </view>
</template>

<script> export default {
       data() {
       return {
       NavBarColor: this.NavBarColor, urls: '', } }, onLoad(params) {
       let {
      url: urls} = params // /static/pdf.html  Just put it on static In the catalog pdf.html file location  this.urls = `/static/pdf.html?url=${
        urls}` } } </script>

4. Click on a pdf file , Jump to the newly created web-view In file , And need to carry url Parameter jump ,pdf.js Will be based on url The data obtained by the parameters after , Generate pdf And render to the page , As shown below ：

seeVideo(item) {
    
    if (item.subjectType === ' file ') {
    
      // pdf File preview 
      uni.navigateTo({
    
      // this.$config.staticDomainURL  It's a preview pdf An interface to the file 
      // item.videos  Get is pdf Path to file 
        url: '/pages/shop/webView?url=' + this.$config.staticDomainURL + '/' + item.videos
      })
    } else {
    
      // ......
    }
}