pdf 發票 轉 圖片 紅色文字 扣章 丟失 顯示不全的問題解決

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