admin管理员组文章数量:1648902
在需求中,经常遇见pdf的在线预览效果
很多pdf插件不支持vue3,或者是没有集成翻页放大缩小功能,比如vue-pdf。
实现原理:借用依赖vue-pdf-embed(pdf预览),pdfjs-dist(获取pdf总页数)
借用文档:https://juejin/post/6995856687106261000
实现效果
实现步骤
一:安装依赖
npm i vue-pdf-embed -S
npm install --save pdfjs-dist
二:页面使用
vue文件中
<template>
<div>
<div class="div">
<p class="arrow" style="text-align:center">
<!-- // 上一页 -->
<van-tag color="#7232dd" plain @click="prev">上一页</van-tag>
{{pageNum}} / {{numPages}}
<!-- // 下一页 -->
<van-tag color="#7232dd" @click="next" style="margin-left: 5px>下一页</van-tag>
</p>
<p style="text-align:center">
<van-tag color="#7232dd" plain @click="zoomA">放大</van-tag>
<van-tag color="#7232dd" @click="zoomB" style="margin-left: 5px">缩小</van-tag>
</p>
</div>
<vue-pdf-embed :source="source"
class="vue-pdf-embed"
:style="scaleFun"
:page="pageNum" />
</div>
</template>
<style scoped>
.div {
top: 0;
position: fixed;
z-index: 999;
}
.vue-pdf-embed {
text-align: center;
}
</style>
js文件中
// 引入组件
import VuePdfEmbed from "vue-pdf-embed";
const PDF = require('pdfjs-dist')
// 页面报错解决,在将 pdfjs-dist/build/pdf.worker.js 复制一份放到项目 public 目录下后引入
PDF.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
// 引入文件
import pdfUrl from '@/assets/file/example.pdf'
export default {
components: {
VuePdfEmbed,
},
data() {
return {
source: pdfUrl, // 文件路径
pageNum: 1, // 当前页数
scale: 1, // 缩放比例
numPages: 0, // 总页数
};
},
mounted() {
// 获取总页数
this.getPdfNumPages()
},
computed: {
scaleFun(index) { // 缩放
var scale = this.scale;
return `transform:scale(${scale})`;
},
},
methods: {
getPdfNumPages() {
const url = this.source
const loadingTask = PDFJS.getDocument(url)
loadingTask.promise.then(pdf => {
this.numPages = pdf.numPages
})
},
prev() {
if (this.pageNum > 1) {
this.pageNum -= 1;
}
},
next() {
if (this.pageNum < this.numPages) {
this.pageNum += 1;
}
},
zoomA() {
this.scale += 0.1;
},
zoomB() {
this.scale -= 0.1;
},
},
};
三:可能报错一
问题原因
缺少解析pdf所需loader
问题解决
1:下载依赖
file-loader:file-loader可以用来帮助webpack打包处理一系列的文件;比如:.png 、 .jpg 、.jepg等格式的图片,pdf格式的文件等等
npm install --save-dev file-loader
or
cnpm install --save-dev file-loader
2:配置vue.config.js文件
const path = require('path');
module.exports = {
// webpack配置
chainWebpack: config => {
config.module.rule('pdfjs-dist').test({
test: /\.js$/,
include: path.join(__dirname, 'node_modules/pdfjs-dist')
}).use('babel-loader').loader('babel-loader').options({
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-optional-chaining']
}),
config.module
.rule('pdf')
.test(/\.pdf$/)
.use('file')
.loader('file-loader')
.end();
}
}
三:可能报错二
问题原因
需要在引入 pdfjs-dist 之后配置 workerSrc ,但是引入 pdfjs-dist/build/pdf.worker.entry 之后浏览器还是有个警告:Warning: Setting up fake worker. ,经过各种原因查找,最终找到了一句描述:pdf.worker.js必须位于自己的文件中(而不是与pdf.js捆绑在一起)。否则它不能在服务工作线程中运行。
问题解决
将 pdfjs-dist/build/pdf.worker.js 复制一份放到项目 public 目录下
1:放置文件
在node-module文件夹中,如图找到pdfjs-dist/build/pdf.worker.js
放置到项目 public,与index.html同级
2:配置页面中的js文件
// 也就是本文js文件中,最上方引入的代码
PDF.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
版权声明:本文标题:vue3.0借用vue-pdf-embed实现在线预览pdf文件 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729505383a1203564.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论