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