要求預覽pdf，同時實現(xiàn)可復制功能。

首先使用pdfJs方法，生成pdf數(shù)據(jù)。

下載  npm i pdfjs-dist --s "pdfjs-dist": "^2.2.228",
引入 import pdfjsLib from 'pdfjs-dist'
使用 previewPDF() { //生成pdf數(shù)據(jù)
            //配置基本參數(shù)
            let protocol = document.location.protocol;//獲取當前的網(wǎng)絡協(xié)議
            let pdfBaseUrl = this.pdfBaseUrl; //獲取當前pdf請求的URL
            let pdf_protocol = pdfBaseUrl.split('//')[0]; //截取當前pdf請求的URL，獲取協(xié)議
            if(protocol !== pdf_protocol) { //當前項目的協(xié)議跟查看pdf的協(xié)議不一樣的時候要替換協(xié)議，不替換協(xié)議會出現(xiàn)跨域問題
                pdfBaseUrl = pdfBaseUrl.replace('http:',protocol);//替換http協(xié)議為當前協(xié)議
            }
            pdfjsLib.GlobalWorkerOptions.workerSrc = pdfBaseUrl + 'signature/build/pdf.worker.js'; //設置pdf.worker.js
            let cMapUrl = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/';//設置文字路徑

            const _self = this;
            //設置pdf的請求地址
            let url = process.env.VUE_APP_API_BASE + '/signature/api/file/filedownload?access_token='+
                this.GLOBAL.global.access_token +'&fileId='+
                this.settingInfo.signatureFileId+'&companyCode=' + this.GLOBAL.global.companyCode;

            //頁面渲染完成后，請請求pdf
            this.$nextTick(() => {
                _self.pdfRunStatus = 0
                _self.loading = true;//顯示加載
                pdfjsLib.getDocument({ //請求pdf
                    url:url,
                    cMapUrl:cMapUrl,
                    cMapPacked:true
                }).promise.then(function (pdf) { //獲取pdf數(shù)據(jù)
                    for (let i = 0; i < pdf.numPages; i++) { //根據(jù)pdf的數(shù)量，動態(tài)生成縮略圖畫布
                        let item = '<canvas class="canvas" id="the_small_canvas_' + (i+1) + '"  height="136" width="98" style="border:1px solid #e4e4e4;"></canvas>';
                         //中間區(qū)域pdf畫布
                        let p_item = `<canvas class="canvas" id="p_the_canvas_${i + 1}" height="842" width="595" style="border:1px solid #e4e4e4;"></canvas>`
                        _self.pdfList.push(item);
                        _self.pdfListM.push(p_item);
                    }
                    _self.timer = setInterval(() => {
                        // 生成 分頁所有元素框
                        if (pdf.numPages > _self.pdfRunStatus) {
                            for (let i = _self.pdfRunStatus; i < _self.pdfRunStatus + 1; i++) { //動態(tài)循環(huán)去獲取每頁pdf數(shù)據(jù)
                                pdf.getPage(i + 1).then(function (page) { //獲取pdf每頁的數(shù)據(jù)

                                    let viewport = page.getViewport(1); //獲取視圖

                                    //生成縮略圖畫布
                                    let t_canvas = document.getElementById(`the_small_canvas_${i + 1}`);
                                    let t_context = t_canvas.getContext('2d');
                                    let t_scale = Math.min(t_canvas.width / viewport.width, t_canvas.height / viewport.height);//設置縮放比例

                                    //設置畫布大小
                                    t_canvas.height = 136;
                                    t_canvas.width = 98;

                                    let t_renderContext = { //顯示pdf
                                        canvasContext: t_context,
                                        viewport: page.getViewport(t_scale)
                                    };
                                    page.render(t_renderContext);

                                    //設置拖拽區(qū)域的寬度跟高度
                                    _self.canvas.width = Math.ceil(viewport.width);
                                    _self.canvas.height += Math.ceil(viewport.height);
                                    // if(page.rotate !==0){
                                    //   page._pageInfo.rotate = 90;
                                    // }
                                    //設置高度區(qū)間
                                    _self.heightList.push(_self.canvas.height);
                                    //設置每頁pdf高度
                                    _self.eachHeight.push(Math.ceil(viewport.height))
                                    //獲取畫布父節(jié)點
                                    let pageDiv = document.getElementById(`canvas_box_${i}`);
                                    //生成中間區(qū)域畫布
                                    let p_canvas = document.getElementById(`p_the_canvas_${i + 1}`); //獲取畫布的dom節(jié)點
                                    let p_context = p_canvas.getContext('2d');

                                    //設置畫布寬度跟高度
                                    p_canvas.width = Math.ceil(viewport.width);
                                    p_canvas.height = Math.ceil(viewport.height);

                                    //設置畫布父元素高度跟寬度
                                    pageDiv.style.width = Math.ceil(viewport.width) + 'px';
                                    pageDiv.style.height = Math.ceil(viewport.height) + 'px';

                                    let p_scale = Math.min(p_canvas.width / viewport.width, p_canvas.height / viewport.height); //設置要縮放的大小
                                    let p_renderContext = { //顯示pdf
                                        canvasContext: p_context,
                                        viewport: page.getViewport(p_scale)
                                    };
                                    if(_self.pdfRunStatus === pdf.numPages) { //全部加載完畢
                                        _self.getInfo();//獲取當前頁面得勾選位置跟人員位置列表
                                        _self.getVoterInfo();//獲取表決票的數(shù)據(jù)
                                        if(!_self.isView){
                                          _self.showImportBtn();//判斷是否應該顯示導入其他文件簽字位置按鈕
                                        }
                                        _self.loading = false;
                                    }
                                    //以下代碼為了創(chuàng)建文本圖層，可以復制pdf上的文字
                                    page.render(p_renderContext).then(()=>{
                                        return page.getTextContent();
                                    }).then((textContent)=>{
                                        // 創(chuàng)建文本圖層div
                                        const textLayerDiv = document.createElement('div');
                                        //添加class
                                        textLayerDiv.setAttribute('class', 'textLayer');
                                        // // 將文本圖層div添加至每頁pdf的div中
                                        pageDiv.appendChild(textLayerDiv);

                                        //創(chuàng)建頁碼圖層
                                        const pageNum = document.createElement('div');
                                        //添加class
                                        pageNum.setAttribute('class','setting-position-middle-page');
                                        //設置頁碼顯示的內(nèi)容
                                        pageNum.innerHTML = '第' + (i+1) + '頁';
                                        //添加到dom節(jié)點中
                                        pageDiv.appendChild(pageNum);

                                        // 創(chuàng)建新的TextLayerBuilder實例
                                        var textLayer = new TextLayerBuilder({
                                            textLayerDiv: textLayerDiv,
                                            pageIndex: page.pageIndex,
                                            viewport: viewport
                                        });

                                        textLayer.setTextContent(textContent);
                                        textLayer.render();
                                    });
                                });
                            }
                            _self.pdfRunStatus += 1
                        } else {
                            clearInterval(_self.timer)
                        }
                    }, 100);
                }).catch((res)=>{
                    _self.loading = false;
                })
            })
        },