快捷導(dǎo)航

vue移動端項(xiàng)目渲染pdf步驟及問題小結(jié)

更新時(shí)間：2022年08月17日 09:58:48 作者：luoxiaonuan_hi

這篇文章主要介紹了vue移動端項(xiàng)目渲染pdf步驟,vue-pdf的插件在使用的過程中是連連踩坑的，基本遇到3個(gè)問題，分別在文中給大家詳細(xì)介紹，需要的朋友可以參考下

第一步：引入pdf包

import pdf from "vue-pdf-signature";，這里不引入vue-pdf的包后面再做解釋
import CMapReaderFactory from "vue-pdf-signature/src/CMapReaderFactory.js";
（CMapReaderFactory）解決漢字空白的問題

第二步：頁面的component注冊pdf組件

components: {
    pdf
},

第三步：頁面放置pdf盒子

<!-- 有查詢pdf結(jié)果顯示的盒子 -->
<pdf :src="pdfSrc"></pdf>    // pdfSrc為pdf包處理過后的預(yù)覽鏈接

第四步：頁面請求加載pdf之前可以寫一個(gè)loading的方法，這里用的vant提示，無需要可不寫

slowLoading() {
    var _this = this
    const toast = Toast.loading({
                duration: 0, // 持續(xù)展示 toast
                forbidClick: true,
                message: "正在生成您的權(quán)益單，請稍等...",
                className: "loading"
            });
    let tips = [
            '正在生成您的權(quán)益單，請稍等...', 
            '權(quán)益單文檔生成時(shí)間較長，請耐心等待', 
             '您可以選擇年度查詢']
    let strlen = tips.length;
    _this.tipTimer = setInterval(() => {
        let index = Math.floor(Math.random() * strlen);
        toast.message = tips[index];
    }, 3000);
}

第五步：引入處理pdf下載的方法

// _this.pdfUrl是后端返回的pdf鏈接
// _this.pdfSrc聲明空變量對處理的過的pdf鏈接進(jìn)行接收綁定給頁面的pdf組件的src屬性
 
loadPdf() {
    var _this = this;
    _this.pdfDownloadUrl = _this.pdfUrl + "?isDownload=1";
    console.log(_this.pdfDownloadUrl);
    _this.pdfSrc = pdf.createLoadingTask({
        url: _this.pdfUrl,
        // 沒有生效，需要確認(rèn)原因并修改
        onProgress: function (status) {
            let ratio = status.loaded / status.total;
            console.log("加載進(jìn)度.." + ratio);
        },
        //cMapUrl: `https://cdn.jsdelivr.net/npm/pdfjs-dist@^2.5.207/cmaps/`,
        cMapPacked: true,
        CMapReaderFactory
    });
 
    //加載完P(guān)DF后對緩存進(jìn)行清除
    for (var key in require.cache) {
        if (key.indexOf('bcmap') >= 0) {
            delete require.cache[key];
        }
    }
 
    // _this.pdfSrc = _this.loadingTask;
    // console.log(_this.pdfSrc, 'src');
    _this.pdfSrc.promise.then(pdf => {
        console.log(pdf)
        console.log("pdf 加載成功...");
        Toast.clear();
        clearInterval(_this.tipTimer);
    },
        err => {
            console.log("rejected: ", err);
            clearInterval(_this.tipTimer);
            Toast.clear();
            Toast.fail({
                message: '權(quán)益單生成失敗，請重試',
                forbidClick: true,
                duration: 2,
            });
        });
},

reloadPdf() {
      this.slowLoading();
      this.loadPdf()
},
 
this.reloadPdf()

vue-pdf的插件在使用的過程中是連連踩坑的，基本遇到3個(gè)問題：
1、PDF中文不顯示
2、PDF簽章沒顯示出來
3、第二次打開PDF的時(shí)候會遇到PDF空白的問題

問題1，通過引入CMapReaderFactory.js解決問題，但是這會引起問題3的出現(xiàn)

問題2，pdf簽章不顯示出來

//pdf.worker.js
 
if (data.fieldType === 'Sig') {
  data.fieldValue = null;
    //注釋此行代碼即可
 
  //_this3.setFlags(_util.AnnotationFlag.HIDDEN);
 
}

問題3，頁面空白

CMapReaderFactory文件中加一行delete代碼，加載完語言文件后清除緩存就好了

import { CMapCompressionType } from 'pdfjs-dist-sign/es5/build/pdf.js'
 
// see https://github.com/mozilla/pdf.js/blob/628e70fbb5dea3b9066aa5c34cca70aaafef8db2/src/display/dom_utils.js#L64
 
export default function() {
 
	this.fetch = function(query) {
		 /* webpackChunkName: "noprefetch-[request]" */
		return import('./buffer-loader!pdfjs-dist-sign/cmaps/'+query.name+'.bcmap').then(function(bcmap) {
			//加載完語言文件后清除緩存
			delete require.cache[require.resolve('./buffer-loader!pdfjs-dist-sign/cmaps/'+query.name+'.bcmap')];
			return {
				cMapData: bcmap.default,
				compressionType: CMapCompressionType.BINARY,
			};
		});
	}
};

vue-pdf的包是需要上面這么處理的，但是我在網(wǎng)上get到這么一個(gè)包，是其他人在vue-pdf包的基礎(chǔ)上做的改善，所以不想麻煩的寶貝可以直接下載我最開始說的那個(gè)包就OK了(vue-pdf-signature)

到此這篇關(guān)于vue移動端項(xiàng)目渲染pdf步驟的文章就介紹到這了,更多相關(guān)vue 渲染pdf內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: