vue2.x项目中使用pdf.js转canvas以及踩过的坑

最近有个需求是在vue2.x项目中使用pdf.js,其实以前也用过 pdf.js,以前是用 pdf.js把整个详情页面导出为 pdf,这次是需要用 pdf.js把后台的 pdf转为图片显示在页面上。我是把 pdf 转为 canvas 显示的。

废话不多说,先说用法:

  1. 先安装 pdf.js
npm install pdfjs-dist

我看网上也有说在官网下载项目,再把 pdf.js的包放进自己项目的,但我们要用npm安装,所以需要下载的自己去官网下载:
pdf.js 官网 link

  1. 引入 pdf.js 和 pdf.js worker
import * as  pdfjsLib from 'pdfjs-dist'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
  1. 在 created 中使用:
created() {
    pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
    let winW = document.documentElement.clientWidth;

	// pdf 的 localhost地址是把用来做测试的pdf放在了项目里,实际运用可以用后台返回的线上地址
    let pdfUrl = 'http://localhost:8080/helloworld.pdf';
    
    let loadingTask = pdfjsLib.getDocument(pdfUrl);

    loadingTask.promise.then((pdf) => {
      console.log(pdf);
      let pageNum = pdf.numPages
      this.totalPage = pageNum;
      for (let i = 1; i <= pageNum; i++) {
        pdf.getPage(i).then((page) => {
          let viewport = page.getViewport({ scale: 1.5, });
          let scale = (winW / viewport.width).toFixed(2)
          let scaledViewport = page.getViewport({ scale: 1.5, })
          let canvas = document.getElementById('the-canvas' + i)
          let context = canvas.getContext('2d')
          canvas.height = scaledViewport.height
          canvas.width = scaledViewport.width
          let renderContext = {
            canvasContext: context,
            viewport: scaledViewport
          }
          let renderTask = page.render(renderContext)
          renderTask.promise.then(() => {
          })
        })
      }
    }, function (reason) {
      console.error(reason)
    })
  },

别忘了html容器 —— canvas:

<canvas v-for="item in totalPage" :key="item" :id='"the-canvas" + item' class="pdf-content"></canvas>

使用方法说完了,再说说踩过的坑:

  1. loadingTask 是 promise,所以要用官网例子的写法:
    官网的例子

  2. page.render() 也是代码 promise,官网的例子中没有写 .prmise,在我项目中报错了,加了 .promise这个写法才正常:
    代码片段

  3. 如果你写前端页面的时候没有后台联调,用自己的本地 pdf做demo,那你要注意本地pdf的位置!!!
    我看网上说是放在 static文件夹中,但是我们项目没有 static,是用public文件夹做输出,所以放在了 public中,引用的时候直接是 localhost 地址:

// 此处引用直接是http://localhost:8080下的pdf,不用写public,因为public文件夹是输出的文件夹
let pdfUrl = 'http://localhost:8080/helloworld.pdf';

自己随便找个本地的 pdf 放在public中就行了,此处我用的是官网示例中的 helloworld.pdf。

  1. 不算是坑,算是小经验吧:
    代码片段
    在做图片显示的时候:page.getViewport({ scale: 1.5, }) 中scale 是控制 canvas的大小的,以为是几倍显示,因为scale设为1的话图片显示有点小,所以我用了1.5,这个根据自己需要调整。

可能还有一些别的坑我没遇到,欢迎遇到的小伙伴分享,避免大家踩坑。
希望此文能对你有所帮助。

展开阅读全文
©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值