Vue做pdf文件预览下载,vue展示pdf文件
相信大家都遇到过PDF文件在线预览的功能。下面这篇文章主要介绍vue3如何实现PDF文件在线预览功能的相关信息。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。
目录
概述文本创建vue3项目添加PDF预览插件摘要
概述
之前我们使用Reactjs React-PDF预览React版本的PDF文件。今天我们用Vue3 Vue-PDF在线预览Vue版本的PDF文件。
我们来看看完成后的效果。
正文
创建 vue3 项目
让我们首先创建一个新的Vue3项目，并在终端中输入命令。
pnpm创建vite vue-pdf-预览
选择vue-ts回车，cd进入项目根目录，执行pnpm install，等待安装项目依赖包。
安装完项目依赖包后，让我们启动项目并执行命令pnpm run dev。你可以看到控制台已经输入了以下内容
运行在以下位置的vite v2.9.9开发服务器：
本地：http://本地主机：3000/
网络：使用`- host 暴露
780毫秒后就绪。
按住control/command的鼠标左键，项目在浏览器中打开。
项目成功启动。
添加 PDF 预览插件
项目成功启动后，我们安装PDF预览插件。
安装vue-pdf-嵌入
pnpm安装vue3-pdfjs
我们在src下创建一个新文件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-嵌入{
文本对齐：居中；
宽度：515px
边框：1px纯色# e5e5e5
边距：0自动；
框大小：边框-框；
}
/风格
添加后，我们会在App.vue文件中引入PDF预览组件，也会引入事先准备好的PDF文件，如下图。
模板
差异
PDFView :pdfUrl=jsPdf /
/div
/模板
脚本安装语言=ts
从导入PDFView。/components/pdfPreview.vue
从导入jsPdf。/Javascript.pdf
/脚本
接下来，让我们回到新创建的PDF预览组件页面来改进预览功能。
先介绍一下PDF预览版插件。
从“vue-pdf-embed”导入VuePdfEmbed
从“vue3-pdfjs/esm”导入{ createloadingstask }；//获取总页数
使用vue3reactive定义一些页码，页码和PDF文件预览地址变量。
恒定状态=反应({
来源：props.pdfUrl，预览pdf文件的地址
第1页，当前页面
缩放比例：1，//缩放比例
NumPages: 0，//总页数
});
在OnMounted hook函数中使用createLoadingTask来获取预览文件的总页数。
const loading task=createLoadingTask(state . source)；
loading task . promise . then((pdf:{ numPages:number })={
state . numpages=pdf . numpages；
});
将预览插件代码添加到模板
div class=pdf-wrap
vue-pdf-embed:source= state . source :style= scale fun class= vue-pdf-embed :page= state . pagenum /
/div
打开浏览器可以看到PDF文件已经加载，但是样式不是很好看。接下来，我们将优化样式，改进PDF文件的翻页功能、缩放功能和当前页面/总页面显示功能。
将以下代码添加到tempate中
div class=页面工具
Class= page-tool-item 上一页/div
page-tool-item 下一页/div
div class= page-tool-item“{ state . pagenum } }/{ { state . numpages } }/div
Class= page-tool-item 放大/分隔
Class= page-tool-item 缩小/分隔
/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 PDF文件预览功能我们已经做完了，
总结
到此这篇关于vue3如何实现便携文档格式文件在线预览功能的文章就介绍到这了，更多相关vue3PDF文件在线预览内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。