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

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

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

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

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

html

引入并定义

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\')

秒客网