vue2中使用vue-pdf插件预览pdf实现及问题总结

前言

• 首先说明vue3不支持vue-pdf，vue3项目用pdfjs-dist

实现步骤

• 安装

 npm i -s vue-pdf

• 引入组件

import pdf from 'vue-pdf'

export default {
  name: 'App',
  components: {
    pdf
  },
  ···
}

• html中使用组件
  • 单页

  <pdf :src="file"></pdf>
  

  • 多页

  <pdf v-for="i in pageNum" :key="i" :src="file" :page="i"></pdf>
  

• 数据处理
  • 单页

  export default {
    ···
    data () {
      return {
          file: "/pdf/test.pdf"
      }
    }
  }
  

  • 多页

  export default {
    ···
    data () {
      return {
        file: "/pdf/test.pdf",
        pageNum: 1
      }
    },
    methods: {
      getPageNum () {
        let loadingTask = pdf.createLoadingTask(this.file)
        loadingTask.promise.then(pdf => {
          this.pageNum = pdf.numPages
        }).catch(err => {
          console.error('pdf加载失败', err);
        })
      }
    },
    mounted () {
      this.getPageNum()
    }
  }
  

问题总结

• pdf文件定位
  • 如果是请求后台文件，注意跨域问题，pdf文件的跨域问题在前端配置是不能解决的，请后台同事解决
  • 如果是链接文件，直接将file改成url就行了
  • 如果是本地文件，需要将所有pdf文件放到public文件夹下，如上文代码中我写的/pdf/test.pdf就是放在public/pdf文件夹下的pdf文件，/路径直接就是public路径。注意不能放在其他地方，也不能用require的方式加载，这些我都试过。
• file-loader
  • 默认情况vue项目是不识别pdf文件的，所以我们还需要再webpack配置里新增一个rule，不然的话虽然页面不会报错，但是在控制台会有一个warning：Warning: Indexing all PDF objects，然后页面空白，pdf文件无法解析和渲染。
  • 首先安装file-loader,npm i -s file-loader
  • 然后修改vue.config.js

  module.exports = defineConfig({
    ···
    configureWebpack: {
      module: {
        rules: [
          {
            test: /\.(png|jpe?g|gif|pdf)$/i,
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            },
          },
        ],
      }
    }
  })