vue中使用pdfjs-dist + turnjs实现页面的翻书浏览功能_vue.js_

module.exports = { chainWebpack: config => { config.plugin('provide').use(webpack.ProvidePlugin, [{ $: 'jquery', jquery: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }]) } 

import $ from "jquery"; import * as PDFJS from "pdfjs-dist"; import turn from "../utils/lib/turn.js"

//初始化pdf插件 /* ** @param fileUrl pdf有效的查看地址 ** （1、线上地址(如：http://www.xxx.com) ** 2、本地public地址（例如：/static/view.pdf）） ** @param pdfPicturePath1 pdf转化的图片地址-用于放大查看所有pdf图片 */ readPdf(fileUrl,index) { //这个index 是我代码中要用的， 如果单独使用的话， 可以不要 index 这个参数 let self = this; let loadingTask1 = PDFJS.getDocument(fileUrl); //读取pdf文件 console.log(loadingTask1, '-----------loadingTask'); loadingTask1.promise .then(function (pdf) { if (pdf) { // pdf 总页数 const pageNum = pdf.numPages; for (let i = 1; i <= pageNum; i++) { // 生成每页 pdf 的 canvas const canvas = document.createElement('canvas'); canvas.id = 'page'+index+'Num' + i; canvas.className = 'h'+index; // 将 canvas 添加到 dom 中,docView(存放canvas的div) let docViewX = "docView"+index; console.log(docViewX); self.$refs[docViewX].append(canvas); //getContext() 方法返回一个用于在画布上绘图的环境。 const context = canvas.getContext('2d'); self.openPage(pdf, i, context); } setTimeout(() => { self.exportImg(self,index); }, 2000); } }) .catch(function (reason) { console.error('Error: ' + reason); }); }, //pdf转成canvas /* ** @param loading pdf生成图片时的加载状态 ** @param scale 控制 canvas显示的大小 */ openPage(pdfFile, pageNumber, context) { let that = this; pdfFile.getPage(pageNumber).then(function (page) { // reference canvas via context let viewport = page.getViewport({scale:1}); let scale =(847 / viewport.height).toFixed(2) //这里根把自已的项目需求，宽高进行调整 let viewport1 = page.getViewport({scale:scale}); let canvas = context.canvas; canvas.width = viewport1.width; canvas.height = viewport1.height; canvas.style.width = '100%'; canvas.style.height = '100%'; let renderContext = { canvasContext: context, viewport: viewport1 }; page.render(renderContext); that.loading = false; }); return; }, //canvas转成图片（可根据具体情况，进行图片转化显示）这里我把所有图片的base64存放在数组里面，方便放大查看，也可以直接把生成图片标签进行图片展示 // 转图片 exportImg(self,index) { //let canvaslist= document.querySelectorAll('canvas'); let canvaslist = document.getElementsByClassName("h"+index); let pdfPicturePathX = "pdfPicturePath"+index; this[pdfPicturePathX] = []; //这里把所有的图片地址放入到 pdfPicturePath1 数组中去 for (let i = 0; i < canvaslist.length; i++) { // let canvas = document.getElementById("pageNum" + (i + 1)); // // 将 canvas 转成 base64 格式的图片 // let base64ImgSrc = (canvas as any).toDataURL("image/png") // const img = document.createElement("img") // img.setAttribute('class', 'pdf-img'); // img.src = base64ImgSrc // img.style.width = '100%'; // // 将图片挂载到 dom 中 // (self.$refs as any).docView.append(img); let canvasNode = document.getElementById('page'+index+'Num' + (i + 1)); // 将 canvas 转成 base64 格式的图片 if(canvasNode){ this[pdfPicturePathX].push({page: i + 1, pic: canvasNode.toDataURL('image/png'), name: i + 1}) }else { continue; } //console.log('--------------aaa-------------', this.pdfPicturePath1); } //到上面就是把pdf文件转成 base64格式的图片， 之后把它们存在 pdfPicturePath1的数组中 this.$nextTick(()=>{ if(index == 1){ if($("#magazine1").children().length > 0){ $("#magazine1").turn("destroy"); $("#magazine1").children().remove(); } let magazine1 = $("#magazine1"); this[pdfPicturePathX].forEach(i=>{ magazine1.append("") }); //setTimeout(()=>{ $("#magazine1").turn({ autoCenter: true, elevation: 50, acceleration: true, //direction:"rtl", // when: { // turned: function() { // //当前页 // // console.log("Current view: ", $(this).turn("view")); // // //总页数 // // console.log( // // "#magazine has " + $("#magazine").turn("pages") + " pages" // // ); // //$("#magazine").turn("hasPage", 10); // //$("#magazine").turn("pages", 1); // } // } }) $("#magazine1").turn("center"); $("#magazine1").turn("page"); //console.log($("#magazine1").turn("pages")); $("#magazine1").bind("start",function(e,p,c){ if(c == "tl"||c == 'tr'){ e.preventDefault(); } }) //},1000 } },