nuxt整合vue-pdf插件和使用createLoadingTask方法进行分页

1.背景

目前需要做一个展示pdf功能的需求，所以想到了使用vue-pdf插件，该插件在vue-cli中很好使用，不会出现啥问题，但是放到nuxt项目中就会出现一些问题

2.整合

1.官网地址：https://www.npmjs.com/package/vue-pdf

cnpm install --save vue-pdf

2.写插件js，放到plugins目录下

import Vue from 'vue'
import pdf from 'vue-pdf'
Vue.component('pdf', pdf)

3.nuxt.config.js中添加该js

 plugins: [{ src: '~/plugins/pdf.js', ssr: false }]

4.最重要的一步，要在nuxt.config.js的build的属性下加下面一段代码，如果不加，那么使用<pdf>标签会报错，就算你在.vue文件中使用 import pdf from 'vue-pdf'直接导入,依然会报错

build: {
         extend(config, ctx) {
          config.output.globalObject = 'this'
          config.module.rules.push(
            {
              test: /\.pdf$/,
              loader: 'url-loader'
            }
          )
        }
}

到这里，基本的功能都可以使用了，使用pdf标签也不会报错了，但是使用pdf的分页功能依然会报错

3.pdf分页

当pdf有多页时，就需要使用pdf的分页功能，否则你只能看到pdf的第一页

那么在官方文档上面使用是如下使用的：

import pdf from 'vue-pdf'
 
var loadingTask = pdf.createLoadingTask('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf');

但是这里在nuxt项目中就会出现问题了，只要你在script中使用import pdf fom 'vue-pdf'或者require都会报错，大致的错误也不是很能看懂，但是好像是因为服务端的原因，导致有些东西引不进去。所以我们需要将导入的操作放到客户端做：即在created的process.client环境下或者是mounted下：

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

data () {
      return {
        numPages: 0,
        src: '',
        vuePdf: null
      }
},
created() {
      if (process.client) {
        this.vuePdf = require('vue-pdf')
        this.pdfLoadTask()
      }
},
methods:{
    pdfLoadTask () {
       this.src = this.vuePdf.default.createLoadingTask("这里填pdf的url地址或者本地文件地址")
         this.src.then(pdf => {
             this.numPages = pdf.numPages;
         })
    }

这样就可以使用createLoadingTask方法来加载pdf了