pdf 发票 转 图片 红色文字 扣章 丢失 显示不全的问题解决

时间:2024-02-20 07:50:52

1. 问题 描述:   pdf 电子发票, 在转 图片的时候, 会发现 发票上的 文字 或 红章 丢失 显示不全的问题

2. 问题环境 : 本地项目没有问题, 但是 打包 上传后 项目 出现该情况

3. 问题原因: 相关字体文件没能成功引入到项目 , 可能是缺少字体,或者是 线上环境 跨域 导致字体引入失败,

 4. 问题解决:  将 相关 的 字体文件 放到 与 项目同目录,就可以解决例如 跟 dist 同目录 下 ,在项目中 设置字体引入

 

 

 

html

<div style="display:none" class="pdfList" />

 

js

引入 并定义

const cmapsnew = \'./diy_static/\'   设置 字体引入路径
import pdfWorker from \'pdfjs-dist/build/pdf.worker\' 
 
  const pdfList = document.querySelector(\'.pdfList\') // 存放的转换后的图片位置 
      this.blobToBase64(decodedBase64).then(async(res) => { //  pdf  base64 转换
        // 转化后的base64
        // PDFJS.cMapPacked = true // 解决电子签章问题
        // cMapUrl: CMAP_URL,
        PDFJS.GlobalWorkerOptions.workerSrc = pdfWorker
        const base64 = res.substring(res.indexOf(\',\') + 1) // 获得bas464编码
        const decodedBase64NEw = atob(base64) // 转换成 新的 base64

        const pdf = await PDFJS.getDocument({ data: decodedBase64NEw, cMapUrl: cmapsnew,
          cMapPacked: true }) // 返回一个pdf对象
        const canvas = document.createElement(\'canvas\') // 创建cavas
        const page = await pdf.getPage(1) // 获取pdf 第一页 内容
        const scale = 2.0// 缩放倍数,1表示原始大小
        const viewport = page.getViewport(scale)
        const context = canvas.getContext(\'2d\') // 创建绘制canvas的对象
        canvas.height = viewport.height * 2 // 定义canvas高和宽
        canvas.width = viewport.width * 2
        const renderContext = {
          canvasContext: context,
          viewport: viewport
        }
        await page.render(renderContext)
        canvas.className = \'canvas\' // 给canvas节点定义一个class名,这里我取名为canvas
        pdfList.appendChild(canvas) // 插入到pdfList节点的最后
        this.imgurl = canvas.toDataURL(\'image/png\')