要求预览pdf，同时实现可复制功能。
首先使用pdfJs方法，生成pdf数据。
下载 npm i pdfjs-dist --s "pdfjs-dist": "^2.2.228",
引入 import pdfjsLib from 'pdfjs-dist'
使用 previewPDF() { //生成pdf数据
//配置基本参数
let protocol = document.location.protocol;//获取当前的网络协议
let pdfBaseUrl = this.pdfBaseUrl; //获取当前pdf请求的URL
let pdf_protocol = pdfBaseUrl.split('//')[0]; //截取当前pdf请求的URL，获取协议
if(protocol !== pdf_protocol) { //当前项目的协议跟查看pdf的协议不一样的时候要替换协议，不替换协议会出现跨域问题
pdfBaseUrl = pdfBaseUrl.replace('http:',protocol);//替换http协议为当前协议
}
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数据
for (let i = 0; i < pdf.numPages; i++) { //根据pdf的数量，动态生成缩略图画布
let item = '<canvas class="canvas" id="the_small_canvas_' + (i+1) + '" height="136" width="98" style="border:1px solid #e4e4e4;"></canvas>';
//中间区域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++) { //动态循环去获取每页pdf数据
pdf.getPage(i + 1).then(function (page) { //获取pdf每页的数据
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);
//设置拖拽区域的宽度跟高度
_self.canvas.width = Math.ceil(viewport.width);
_self.canvas.height += Math.ceil(viewport.height);
// if(page.rotate !==0){
// page._pageInfo.rotate = 90;
// }
//设置高度区间
_self.heightList.push(_self.canvas.height);
//设置每页pdf高度
_self.eachHeight.push(Math.ceil(viewport.height))
//获取画布父节点
let pageDiv = document.getElementById(`canvas_box_${i}`);
//生成中间区域画布
let p_canvas = document.getElementById(`p_the_canvas_${i + 1}`); //获取画布的dom节点
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();//获取表决票的数据
if(!_self.isView){
_self.showImportBtn();//判断是否应该显示导入其他文件签字位置按钮
}
_self.loading = false;
}
//以下代码为了创建文本图层，可以复制pdf上的文字
page.render(p_renderContext).then(()=>{
return page.getTextContent();
}).then((textContent)=>{
// 创建文本图层div
const textLayerDiv = document.createElement('div');
//添加class
textLayerDiv.setAttribute('class', 'textLayer');
// // 将文本图层div添加至每页pdf的div中
pageDiv.appendChild(textLayerDiv);
//创建页码图层
const pageNum = document.createElement('div');
//添加class
pageNum.setAttribute('class','setting-position-middle-page');
//设置页码显示的内容
pageNum.innerHTML = '第' + (i+1) + '页';
//添加到dom节点中
pageDiv.appendChild(pageNum);
// 创建新的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;
})
})
},
网友评论