vue项目使用pdf |
您所在的位置：网站首页 › 童年电子书翻页 › vue项目使用pdf |
vue项目使用pdf
|
参考大佬文章https://www.jb51.net/article/266325.htm、http://www.demodashi.com/demo/19089.html，最终实现效果如下图：通过仿翻书效果来预览PDF文件 
一.使用pdf-dist插件将PDF文件转换为一张张canvas图片
1.下载pdf-dist插件：
npm install [email protected] --save //建议安装指定版本，否则可能会报'GlobalWorkerOptions' of undefined错
2.页面引入插件：
import * as pdfjs from "pdfjs-dist";
import * as pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
3.获取base64格式的pdf文件，转换成一张张canvas图片，获取图片路径存入图片数组
let base64 = test; //这里的test是我本地做测试时将PDF文件转换为base64格式的编码
let decodedBase64 = atob(base64); //使用浏览器自带的方法解码
let pdf = await pdfjs.getDocument({ data: decodedBase64 }); //返回一个pdf对象
let pages = pdf.numPages; //声明一个pages变量等于当前pdf文件的页数
// console.log("解析出来的", pages);
for (let i = 1; i {
config.plugin("provide").use(webpack.ProvidePlugin, [{
$: "jquery",
jquery: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
}, ]);
},
在页面引入turn.js和jquery
import $ from "jquery";
import turn from "../../../public/turnJS/turn.js";
对图片数组进行仿书本翻页预览。
{ item.index }}页 -->
本文档共{{ bookPages }}页，您想直接查看第 页 跳转 const that = this; this.$nextTick(() => { $("#turnpage").turn({ acceleration: true, //启用硬件加速,移动端有效 display: "double", //显示：single=单页，double=双页，默认双页 duration: 800, // 翻页撒开鼠标，页面的延迟 page: 1, // 默认显示第几页 gradients: true, // 折叠处的光泽渐变，主要体现翻页的立体感、真实感 autoCenter: true, // turnCorners: "bl,br", // 设置可翻页的页角(都试过了，乱写 4个角都能出发卷起)， bl,br tl,tr bl,tr when: { //下面这一段代码是在两页之间增加阴影以达到更加逼真的效果 turning: function (e, page, view) { const pagesTotalNum = $("#turnpage").turn("pages");//获取总页数 if (page != pagesTotalNum && page != 1) { $(".page").children(".pageShadow").remove(); const leftHtmlStr = `
到这里就结束啦，turn.js和用来做阴影的图片以及中文文档都放在https://download.csdn.net/download/sinat_38628334/87462599，有需要的自取哈。 |
【本文地址】