Vue实现PDF文件预览的方法详解
作者：fby
pdf文件预览是开发业务时常见的一个交互,在toB项目中是经常用到的,对于用户上传文件,预览文件等操作时有一个更好的体验,下面我结合实际业务,在vue的基础上与大家分享这个实现方法,需要的朋友可以参考下
一.安装vue-pdf和vue-pdf-embed这两个库
在业务组件中导入
import pdf from "vue-pdf"; import VuePdfEmbed from "vue-pdf-embed";
二.在上传文件组件的文件列表处绑定预览方法
<Upload.Dragger
style="position: relative; width: 80%; cursor: pointer"
:maxCount="1"
:beforeUpload="beforeUpload"
accept=".pdf"
@remove="removeFile"
@preview="getNumPages" //预览文件
>
<div>
<p class="ant-upload-drag-icon">
<CloudUploadOutlined />
</p>
<p class="ant-upload-text">点击或将文件拖拽到此处</p>
<p class="ant-upload-hint">支持pdf类型的文件</p>
</div>
</Upload.Dragger>
</Form.Item>1.在beforeUpload方法中获取文件的url
const beforeUpload = async (file: FileType) => {
//获取文件的url格式
pdfSrc.value = URL.createObjectURL(file);
if (file.size / 1024 / 1024 > 50) {
message.error("文件大小不可超过50MB");
return Upload.LIST_IGNORE;
}
if (filename !== ".pdf") {
message.warn("请选择指定的文件格式");
return;
}
return false;
};2.实现预览方法
const getNumPages = () => {
//创建加载任务
let loadingTask = pdf.createLoadingTask(pdfSrc.value);
loadingTask.promise
.then((pdf: any) => {
//获取pdf的页数
numPages.value = pdf.numPages;
})
.catch((err: any) => {
console.error("pdf 加载失败", err);
});
pv.value = true;
};三.在弹窗中加载预览窗口
<Modal v-model:visible="pv" :width="700">
<div v-if="pv">
<VuePdfEmbed
v-for="item in numPages"
:key="item"
:source="pdfSrc"
class="vue-pdf-embed"
:page="item"
style="1"
>
</VuePdfEmbed>
</div>
</Modal>效果图
以上就是Vue实现PDF文件预览的方法详解的详细内容，更多关于Vue实现PDF文件预览的资料请关注脚本之家其它相关文章！