vue-pdf 在 nuxt 中的使用记录

包的选择

浏览器是可以直接打开PDF但是在不同的浏览器中可能会有不同的样式。pdf.js是一款完善的pdf处理工具，而vue-pdf正是基于pdf.js的。

正式使用

安装

// 当前选择的时稳定版本，作者已踩坑。
npm i vue-pdf@4.2
npm i pdfjs-dist@2.5.207

使用

方法1
// plugins/pdf.js
import Vue from 'vue'
import pdf from 'vue-pdf'
Vue.component('pdf', pdf)
//挂载到全局，用于 createLoadingTask 功能
export default function ({ app, redirect }, inject) {
  inject('pdf', pdf);
}
// nuxt.config.js
plugins: [{ src: '~/plugins/pdf.js', ssr: false }]
// script
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
this.blobSrc = this.$pdf.createLoadingTask({ url: data, CMapReaderFactory });

方法2
// script
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
this.blobSrc = pdf.createLoadingTask({ url: data, CMapReaderFactory });

// page
// template
<pdf :src="blobSrc" :page="page" @num-pages="totalPage = $event"></pdf>

注意

分页问题

我当前处理是切换page进行页面的切换，没有直接展示全部页面，如果需要展示全部 for 循环pdf对应不同page即可

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

// script
this.blobSrc = pdf.createLoadingTask({ url: data, CMapReaderFactory });
this.blobSrc.promise.then(pdf => {
    this.totalpage = pdf.numPages;
});

数据

• url
• blob
• arraybuffer
• base64
• ...

function fn(base64,type) {
    // json base64 传递的数据流 
    const byteString = atob(base64);
    const ab = new ArrayBuffer(byteString.length);  
    const ia = new Uint8Array(ab);  
    for (let i = 0; i < byteString.length; i++) {  
        ia[i] = byteString.charCodeAt(i);
    }
    const blob = new Blob(ia,{type})
    return window.URL.createObjectURL(blob)
}

问题

• 控制台报 catch 修改版本为 vue-pdf@4.2.0
• build 提示 'pdfjs-dist/es5/build/pdf.js not found' 添加 pdfjs-dist@2.5.207，并且查看 yarn-lock或者package-lock具体对应的版本号