【vue】pdf转图片

把pdf转成图片进行显示

最近做了一个需求–在html页面展示PDF文档
遇到的问题:在浏览器上可以用iframe正常打开pdf文件。但是当html嵌套在手机app里面的时候,-iframe嵌套的PDF文件就不能正常展示了。

解决办法:
1.尝试过使用安卓方法进行文件下载之后,打开PDF文件(这个方法只能在新页面打开PDF文件),但我需要在原有的页面进行PDF文档显示。
2.优化–pdf转图片显示,满足当前页面参考文档,且转为图片后暂时没有模糊等其他问题(采用)

pdf-dist使用步骤

1、下载pdf-dist包,放在public文件下面,在页面中引用方法使用(https://gitee.com/mirrors/pdfjs-dist/)
2、安装pdf-dist(npm i pdf-dist)
3、在对应的页面中引用pdf-dist

import * as PDFJS from "pdfjs-dist";

4、初始化pdf插件

/*
** @param fileUrl pdf有效的查看地址
**				(1、线上地址(如:http://www.xxx.com) 
**				2、本地public地址(例如:/static/view.pdf))
** @param  pdfPicturePath pdf转化的图片地址-用于放大查看所有pdf图片
*/
  readPdf(fileUrl) { 
    let self = this
    self.pdfPicturePath = []
    const loadingTask = PDFJS.getDocument(fileUrl);
    loadingTask.promise.then(function (pdf) {
      if (pdf) {
        // pdf 总页数
        const pageNum = pdf.numPages;
        for (let i = 1; i <= pageNum; i++) {
          // 生成每页 pdf 的 canvas
          const canvas = document.createElement('canvas');
          canvas.id = "pageNum" + i;
          // 将 canvas 添加到 dom 中,docView(存放canvas的div)
          (self.$refs as any).docView.append(canvas);
          //getContext() 方法返回一个用于在画布上绘图的环境。
          const context = canvas.getContext('2d');
          self.openPage(pdf, i, context);
        }
        setTimeout(() => {
            self.exportImg(self)
        }, 1000);
      }
    }).catch(function (reason) {
        console.error("Error: " + reason);
    });
      // };
  }

5、pdf转成canvas

/*
** @param loading pdf生成图片时的加载状态
** @param scale 控制 canvas显示的大小
** @param  pdfPicturePath pdf转化的图片地址-用于放大查看所有pdf图片
*/
  openPage(pdfFile, pageNumber, context) {
    let scale = 2;
    let that = this
    pdfFile.getPage(pageNumber).then(function (page) {
      // reference canvas via context
      const viewport = page.getViewport(scale);
      let canvas = context.canvas;
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      canvas.style.width = "100%";
      canvas.style.height = "100%";
      let renderContext = {
          canvasContext: context,
          viewport: viewport
      };
      page.render(renderContext);
      that.loading = false
    });
    return;
  }

6、canvas转成图片(可根据具体情况,进行图片转化显示)
这里我把所有图片的base64存放在数组里面,方便放大查看,也可以直接把生成图片标签进行图片展示

// 转图片
  exportImg(self) {
    let canvaslist: any = document.querySelectorAll('canvas');
    for (let i = 0; i < canvaslist.length; i++) {
      // let canvas = document.getElementById("pageNum" + (i + 1));
      // // 将 canvas 转成 base64 格式的图片
      // let base64ImgSrc = (canvas as any).toDataURL("image/png")
      // const img = document.createElement("img")
      // img.setAttribute('class', 'pdf-img');
      // img.src = base64ImgSrc
      // img.style.width = '100%';
      // // 将图片挂载到 dom 中
      //   (self.$refs as any).docView.append(img);
      let canvasNode = document.getElementById("pageNum" + (i + 1));
      // 将 canvas 转成 base64 格式的图片
      this.pdfPicturePath.push((canvasNode as any).toDataURL("image/png"))
    }
  }

踩坑

1、控制台报GlobalWorkerOptions of undefined

'GlobalWorkerOptions' of undefined

解决方法:下载指定版本的pdf-dist依赖,pdf-dist@2.2.228(测试有效)

2、GlobalWorkerOptions.workerSrc of undefined

解决办法:
1、找到node_modules>_pdfjs-dist@2.2.228@pdfjs-dist>build>pdf.js文件,把GlobalWorkerOprions.workerSrc的undefined更改为./pdf.worker.js的路径
2、页面中更改

import * as  pdfjsLib from 'pdfjs-dist'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
初始化PDF插件方法里面加上这个,手动赋值workerSrc 地址
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
  • 参考文章地址:https://www.cnblogs.com/wx1993/p/12533899.html
  • 参考文章地址:https://blog.csdn.net/JaneLittle/article/details/107033764
  • 1
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值