pdf.js实现pdf预览和下载系列1

1.下载pdf.js

官网地址：mozilla.github.io/pdf.js/

2.拷贝文件到项目中

将下载好的文件中的build和web拷贝到vue项目的public文件夹下的static

3.修改viewer.js 文件

改动viewer.js ，需要将DEFAULT_URL 默认值去掉，改动如下：(如果没有DEFAULT_URL变量，则不需要修改)

// var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf';
    
var DEFAULT_URL = ''

4.vue前端

注：后端已文件流的形式返回pdf

xxx.js

export function readFile(fileId) {
  return request({
    url: '/api/file/readFile',
    method: 'get',
    params: { fileId: fileId },
    responseType: 'blob',   //注意。此处必须写，不然打开的pdf是空白页
  })
}
​
export function downloadFile(fileId) {
  return request({
    url: '/api/file/downloadFile',
    method: 'get',
    params: { fileId: fileId },
    responseType: 'blob',   //注意。此处必须写，不然打开的pdf是空白页
  })
}

xxx.vue

 <template>
  <div>
    <el-button @click="pdf">预览pdf</el-button>
    <el-button @click="downloadPdf()">模板下载</el-button>
​
  </div>
  
 // <iframe ref="pdfCotainer" :src="pdfUrl" width="100%"></iframe> 方法一：iframe实现
</template>
<script>
import { readFile } from '@/api/xxx.js'
export default {
  name: "pdf",
  data(){
    return {
        pdfUrl:''
    }
  },
  methods: {
      
    pdf() {
      readFile(fileId).then((res) => {
        let blob = new Blob([res.data], { type: 'application/pdf' })
        let href = URL.createObjectURL(blob)
        //此处的路径必须和放pdf.js文件的路径一致，方法二：window.open实现
        window.open(`static/pdf/web/viewer.html?file=${encodeURIComponent(href)}`)
        
        //对应方法一
        //this.pdfUrl=`static/pdf/web/viewer.html?file=${encodeURIComponent(href)}`
      })
    },
        
    downloadPdf() {
       downloadFile(fileId).then(res=>{
           const link = document.createElement('a')
            let blob = new Blob([res.data], {type: 'application/pdf'})
            link.href = URL.createObjectURL(blob)
            link.style.display = 'none'
            link.style.target = '_blank'
            link.href = URL.createObjectURL(blob)
            console.warn(link.href)
            link.download = new Date().getTime() //下载的文件名
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
       })  
    }
  }
}
</script>
​

5.404

经过测试，本地完美运行，结果线上却出现了404，经过一通研究，结果发现本地url可以找到static文件夹中的静态资源，线上却不能直接到这个路径，解决办法如下 vue.config.js

module.exports = {
  publicPath: '/pc/',  //没错，就是他，线上访问不不到他
  ...
}

修改xxx.vue

<script>
import { readFile } from '@/api/xxx.js'
export default {
  name: "pdf",
  data(){
    return {
        pdfUrl:'',
        publicPath: process.env.BASE_URL,  //1.找到vue.config.js定义的路径
    }
  },
  methods: {
      
    pdf() {
      readFile(fileId).then((res) => {
        let blob = new Blob([res.data], { type: 'application/pdf' })
        let href = URL.createObjectURL(blob)
        //此处的路径必须和放pdf.js文件的路径一致，方法二：window.open实现
        
        //2.添加上去
        window.open(`${this.publicPath}static/pdf/web/viewer.html?file=${encodeURIComponent(href)}`)
        
        //对应方法一
        //this.pdfUrl=`${this.publicPath}static/pdf/web/viewer.html?file=${encodeURIComponent(href)}`
      })
    },
        
  }
}
</script>

发布上线，完美访问！

\