vue pdf canvas 展示 pdfjs pdf.worker.js_冷色系微风爱丶的博客

这里如果是只引入了 import PDFJS from 'pdfjs-dist' 就会报错 PDFJS.GlobalWorkerOptions.workerSrc 需要设置一下，但是我设置了不生效报错找不到设置成下面的就没问题参考链接
https://segmentfault.com/q/1010000013646062

我本地引入pdf.worker.js 但是文件过大vue 加载不动更改设置成下面的就没问题

如果有报错 Error: No PDFJS.GlobalWorkerOptions.workerSrc specified 可参考下面链接
https://www.aciuz.com/tech/PDF-js-workerSrc.html

如有报错 Uncaught SyntaxError: Unexpected token '<' 估计是 pdf.worker.js文件没有找到设置成下面的就没问题
如有报错 'WorkerMessageHandler' of undefined 看pdf.worker.js文件有没有成功引入，我引入成功以后就没有报错了
如有报错可参考下面链接
https://blog.csdn.net/houlai_houlai/article/details/86536316

import PDFJS from 'pdfjs-dist/webpack'

<div id="pdfBox"></div>

this.pdfCanvas(this.pdfUrl, 'pdfBox');

// pdf canvas 生成插件函数 
      pdfCanvas(pdf, nameId){
        console.log('293pdf 地址', pdf)
        document.getElementById(nameId).innerHTML = '';
        // this.loading = true
          PDFJS.getDocument(pdf).promise.then(pdf => {
            console.log(149, pdf)
            var numPages = pdf.numPages;
            var start = 1;
            this.renderPageAsync(pdf, numPages, start, nameId);
          }).catch(error => {
            console.log(155, error)
    async renderPageAsync(pdf, numPages, current, nameId){
		  console.log(257, "renderPage async");
		  for(let i=1; i<=numPages; i++){
        console.log(280, i)
        // page
        let page = await pdf.getPage(i);
        let scale = 1.5;
        console.log(284, page.getViewport())
        let viewport = page.getViewport({ scale: scale});
        // Prepare canvas using PDF page dimensions.
        let canvas = document.createElement("canvas");
        let context = canvas.getContext('2d');
        document.getElementById(nameId).appendChild(canvas);
        // document.body.appendChild(canvas);
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        // Render PDF page into canvas context.
        let renderContext = {
            canvasContext: context,
            viewport: viewport
        page.render(renderContext);
      // this.loading = false
      console.log(document.getElementById('pdfBox').scrollHeight)
                    尝试过用 ifame 引入pdf 但是获取不到滚动条embed 引入也不获取不到尝试用过 vue-pdf 但还是获取不到滚动条尝试用PDFObject. 生成embed 也是获取不到附上参考链接https://blog.csdn.net/liuyaqi1993/article/details/77822946?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel...
				最近电脑抽风了，好好的vue项目突然不能运行了，把node_modules清空重装也不行。问题定位在vue-pdf、worker-loader插件上，最后死马当活马医，把worker-loader也卸载了，然后使用cnpm重新安装了一下vue-pdf，发现竟然好了（虽然找不到什么原因，但很欣慰）。
vue-pdf重安装后，build打包，突然多了两个worker.js文件。
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
pdfjs.GlobalWorkerOptions.workerSrc = `...
				最近由于工作需要，需要一个功能在线浏览pdf。经过初步筛选，选定了pdf.js.可以满足我们所有的功能需求。一：先简要概括一下优缺点 
  优点总结：
免费，开源的。这点很重要
纯js实现，客户不需要安装额外的插件
功能强大，缩放，打印，查找功能应有尽有
兼容主流浏览器，火狐，谷歌，ie9+都支持 
1：js 文件偏大，加载一起3m 多，即便压缩后，两个核心js 文件也在1m左右。会影响
不能控制下载状态
在基于vue开发的移动项目中，如果预览的pdf数量不是很多的话，是可以使用 vue-pdf 的，因为在实际开发测试中，ios系统依次预览多个pdf文件会出现白屏的现象，android系统不会出现。但是此时也很难监控阅读状态，所以最后采用pdf.js来实现业务需求。
1.下载pdfjs
 2.放在项目中位置
 3.在页面中使用
 4.出现问题
				最近有这样一个需求，需要在线预览pdf文件，于是就去找这方面的插件。最后筛选了一下，选择了pdf.js这个插件。
我们先看一下pdf.js定义：
pdf.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件
pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，，一个负责API解析，一个负责核心解析
pdf.js本质上是用canvas渲染的，p...
填坑1：import 进不来，会报错，改用require
填坑2：未设置GlobalWorkerOptions.workerSrc时会报错，请求worker.js 404
constPDF=require('pdfjs-dist');
PDF.GlobalWorkerOptions.workerSrc=require('pdfjs-dist/build/pdf.worker.entry');
第二步：调用，打开pdf文件
tips:
填坑1：新版本新增pr...