vue文档pdf,vue-PDF
这篇文章主要介绍了Vue3 Vue-PDF实现便携文档格式文件在线预览实战，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
目录
概述项目实战创建vue3项目添加便携文档格式预览插件
概述
今天我们用Vue3 Vue-PDF实现Vue版本的PDF文件在线预览功能。
我们先来看看完成后效果：
项目实战
创建 vue3 项目
我们先创建一个的Vue3项目，在终端中输入命令
pnpm创建vite vue-pdf预览
选择vue-ts回车，光盘进入项目根目录，执行pnpm安装，等待项目依赖包安装完成。
项目依赖包安装完成后，我们来启动项目，执行命令pnpm运行开发，可以看到控制台输入出了如下内容
运行在以下位置的vite v2.9.9开发服务器：
本地：http://本地主机：3000/
网络：使用`-主机暴露
780毫秒后就绪。
按住control/command + 鼠标左键,项目在浏览器中打开了
项目启动成功
添加PDF预览插件
项目启动成功后，我们安装PDF预览插件
安装vue-pdf-嵌入
pnpm安装vue3-pdfjs
我们在科学研究委员会下新建一个文件src/components/pdfPreview.vue，添加一些代码，初始化vue-pdf预览，代码如下
模板
div class=pdf预览
/div
/模板
脚本安装语言=ts
从“vue”导入{ reactive，onMounted，computed }。
const props=defineProps({
pdfUrl: {
类型：字符串，
必填：真
}
})
onMounted(()={
});
/脚本
style lang=css 范围。pdf-预览{
位置：相对；
身高：100vh
填充：20px 0；
框大小：边框-框；
背景：rgb(66，66，66)；
}。vue-pdf-嵌入{
文本对齐：居中；
宽度：515像素
边框：1px纯色# e5e5e5
边距：0自动；
框大小：边框-框；
}
/风格
添加完成后，我们将PDF预览组件引入到App.vue文件中，并将提前准备的PDF文件也引入，如下所示：
模板
差异
PDFView :pdfUrl=jsPdf /
/div
/模板
脚本安装语言=ts
从导入PDFView ./components/pdfPreview.vue
从导入jsPdf ./Javascript.pdf
/脚本
接下来我们回到刚刚新建的PDF预览组件页面，来完善预览功能
我们先引入PDF预览插件：
从" vue-pdf-嵌入"导入VuePdfEmbed
从" vue3-pdfjs/esm "导入{ createloadingstask }；//获得总页数
使用vue3的反应的定义一些页数，页码，PDF文件预览地址变量
恒定状态=反应({
来源：props.pdfUrl，预览可移植文档格式文件的扩展名(可移植文档格式的缩写)文件地址
pageNum: 1，当前页面
比例：1,//缩放比例
数字页数：0,//总页数
});
在已安装钩子函数中使用createLoadingTask获取下预览文件的总页数
const loading task=createLoadingTask(state。来源)；
正在加载任务。保证。然后((pdf:{ numPages:number })={
状态。numpages=pdf。数字；
});
在template中加入预览插件代码：
div class=pdf-wrap
vue-pdf-embed:source= state。 source :style= scale fun class= vue-pdf-embed :page= state。pagenum /
/div
打开浏览器，可以看到便携文档格式文件已经加载出来了，但是样式不是很好看，我们下一步将样式优化下，并将便携文档格式文件的翻页功能，缩放功能，当前页面/总页数展示功能添加完善
添加如下代码到tempate中
div class=页面工具
div class=页面-工具-项目上一页/div
div class=页面-工具-项目下一页/div
div class= page-tool-item " { state。pagenum } }/{ { state。数字页面} }/div
div class=页面-工具-项目放大/div
div class=页面-工具-项目缩小/div
/div
美化样式：。pdf-预览{
位置：相对；
身高：100vh
填充：20px 0；
框大小：边框-框；
背景色：e9e9e9
}。pdf-wrap{
溢出-y:自动；
}。vue-pdf-嵌入{
文本对齐：居中；
宽度：515像素
边框：1px纯色# e5e5e5
边距：0自动；
框大小：边框-框；
}。页面工具{
位置：绝对；
底部：35px
左填充：15px
填充-右：15px
显示器：flex
对齐-项目：居中；
背景：rgb(66，66，66)；
颜色：白色；
边框半径：19px
z指数：100;
光标：指针；
左边距：50%;
transform:平移x(-50%)；
}。页面-工具-项目{
填充：8px 15px
左填充：10px
光标：指针；
}
添加文件的翻页功能，缩放功能，当前页面/总页数展示功能添加完善
const scale=computed(()=` transform:scale($ { state。scale })`)
函数lastPage() {
if (state.pageNum 1) {
状态。pagenum-=1；
}
}
函数nextPage() {
如果(状态。pagenum状态。数字){
状态。pagenum=1；
}
}
函数pageZoomOut() {
if (state.scale 2) {
state.scale=0.1
}
}
函数pageZoomIn() {
if (state.scale 1) {
状态。scale-=0.1；
}
}
tempalte
div class= page-tool-item @ click=最后一页上一页/div
div class= page-tool-item @ click=下一页下一页/div
div class= page-tool-item " { state。pagenum } }/{ { state。数字页面} }/div
div class= page-tool-item @ click= pageZoomOut 放大/div
div class= page-tool-item @ click= pageZoomIn 缩小/div
到此这篇关于Vue3 Vue-PDF实现便携文档格式文件在线预览实战的项目就做完了，更多相关vue3文件在线预览内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。