vue开发日记｜使用vue-pdf解决文件流展示pdf的问题

序言 

使用vue-pdf插件实现前端pdf在线预览功能，后端返回的不是pdf文件，而是文件流形式的pdf，分享两种展现形式，一种是pdf不分页展示，一种是pdf分页展示。

一、pdf不分页展示

1、下载vue-pdf，在控制台输入

npm install vue-pdf -D

2、html添加标签

3、模版里引入vue-pdf，

4、相关js

⚠️启动后可能出现window is not defined报错

【解决方案】百度后发现这是webpack3.0的bug，只需要在webpack.base.config.js下的output中添加一条globalObject: 'this'即可解决此问题。

module.exports = {
    context: path.resolve(__dirname,‘../’),
    entry: {
        app: './src/main.js'
    },
    output:{
        path: config.build.assetsRoot,
        globalObject: 'this',
        filename: '[name].js',
        publicPath: 
          process.env.NODE_ENV === 'production'
          ?config.build.assetsPublicPath
          :config.dev. assetsPublicPath
},

二、pdf分页展示

 1、下载vue-pdf，在控制台输入

npm install vue-pdf -D

2、html添加标签，pageNum是总页数

 3、模版里引入vue-pdf

 4、相关js

  在getPdfUrl中增加获取页数的方法

const loadingTask = pdf.createLoadingTask(that.src)//获取页码

  添加翻页方法 

     // 上一页
      prePage() {
        let page = this.pageNum
        page = page > 1 ? page - 1 : this.numberPage;
        this.pageNum = page
      },

      // 下一页
      nextPage() {
        let page = this.pageNum
        page = page < this.numberPage ? page + 1 : 1
        this.pageNum = page
      }

  整体代码

推荐

如需解决文件流pdf下载，可参考另外一篇日记https://blog.csdn.net/qq_43292438/article/details/121387158?spm=1001.2014.3001.5501

补充 

在项目上线打包时可能会出现pdf显示空白，报woreker.js找不到的问题，可参考另一篇笔记

 https://blog.csdn.net/qq_43292438/article/details/121742078?spm=1001.2014.3001.5501