admin管理员组文章数量:1648922
需求
- pdf预览
- 翻页
- 禁止下载打印
- 侧边栏预览
实现效果
安装vue-pdf
npm i vue-pdf
引入并使用
<pdf
ref="pdfRef"
style="margin: 0 auto"
:src="pdfData"
:page="currentPage"
@num-pages="pageTotalNum = $event"
></pdf>
import pdf from "vue-pdf";
var loadingTask = pdf.createLoadingTask(
"xxx.pdf"
);
export default {
name: "pdfView",
components: {
pdf,
}
}
关键代码
获取PDF使用canvas绘制并转化成base64图片
/**
* @description 加载PDF获取canvas图片
*/
loadPdf() {
this.loading = true;
this.pdfData.promise.then((pdf) => {
this.pageTotalNum = pdf.numPages;
let pagePromise = [];
for (let index = 1; index <= this.pageTotalNum; index++) {
const element = pdf.getPage(index);
pagePromise.push(element);
}
this.getImageList(pagePromise);
});
},
/**
* @description 通过page 渲染canvas获取base64图片
*/
getImageList(pagePromise) {
let result = [];
Promise.all(pagePromise)
.then((res) => {
for (let index = 0; index < res.length; index++) {
// 当前页
const page = res[index];
// 绘制canvas
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const viewport = page.getViewport({ scale: 1 });
canvas.width = viewport.width;
canvas.height = viewport.height;
const renderContext = {
canvasContext: context,
viewport: viewport,
};
result.push(page.render(renderContext).promise);
// canvas转图片
Promise.all(result).then(() => {
this.imgList.push(canvas.toDataURL());
this.loading = false;
});
}
})
.catch(() => {
this.loading = false;
});
},
翻页,就是改变当前page就行了,会自动渲染
/**
* @description 上一页
*/
prePage() {
let page = this.currentPage;
if (page !== 1) {
page = page > 1 ? page - 1 : this.pageTotalNum;
this.currentPage = page;
}
},
/**
* @description 下一页
*/
nextPage() {
let page = this.currentPage;
if (page !== this.pageTotalNum) {
page = page < this.pageTotalNum ? page + 1 : 1;
this.currentPage = page;
}
},
放大缩小
/**
* @description 放大
*/
zoomIn() {
this.scale += 25;
const itemEl = this.$refs["pdfRef"].$el;
itemEl.style.width = parseInt(this.scale) + "%";
},
/**
* @description 缩小
*/
zoomOut() {
this.scale -= 25;
const itemEl = this.$refs["pdfRef"].$el;
itemEl.style.width = parseInt(this.scale) + "%";
},
关于下载、打印
下载:从后端获取的文件流直接通过转blob、a标签下载就行
打印:this.$refs["pdfRef"].pdf
能够拿到pdf对象,里面有个print的方法可以使用
新增上传预览PDF
源代码
pdf预览
同理实现了一个canvas图片预览,在同一个仓库
版权声明:本文标题:使用Vue-PDF实现预览、翻页、放大缩小、侧边栏预览 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1729505247a1203551.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论