vue3 实现预览pdf的几种方式（vue3

2024-07-09 14:42| 来源: 网络整理| 查看: 265

功能描述：

要实现菜单（二级）绑定文件，并进行预览（点击菜单即触发），支持文件上传下载（绑定菜单）,文件以byte[]形式保存到数据库（至于为什么不用文件存储系统，因为这是领导定的 =，= 而且这个功能比较小，数据也不多，成本有限），同时，要解析pdf文件里的内容（固定模板），抓取部门段落信息单独保存；页面展示的时候还是目录之后展示（目前是暴力从目录的后一页开始展示），需求明确，开发！

技术栈

后端： java + springboot + mysql 前端： vue3 + ts

后端实现思路：因为需要完全开源，所以首选了pdfBox，后端很简单的处理

multipartFile 直接转成byte[],保存到数据库配合菜单信息（业务不多做阐述）解析pdf文件，根据模板里的固定标题进行字符串切割，然后在判断包含下一个标题的字符串，定位到需要保存的字符串内容，以字符串的形式保存到刚才文件的同一条数据中，搞定！

曾尝试过后端pdf流转html和图片的方式去给前端传值，都一一否定了

转html有xss风险，转图片，不如直接交给前端处理，后端处理容易丢失像素,而且尝试了好多方法也没解决

前端实现思路：

1.最开始是直接以iframe形式直接接收后端返回的流

ts:

const iframeUrl:any = ref(""); axios({ url:xxx, method:"get", responseType:"blob" }).then((res) =>{ const blob = new Blob([res.data],{type: 'application/pdf'}); iframeUrl.value = window.URL.createObjectURL(blob); } )

vue:

可以预览，但是带了大框，页面分割感特别强，而且不同浏览器应该展示也不一样（i guess）

跟产品给我画的宏伟蓝图差了不少，所以pass;

2.采用vue3-pdf 或者 vue-office/pdf

需要借助外力了，就安装一下：

npm install vue3-pdf 或者 npm install @vue-office/pdf

安装完，如果下面报找不到对应module(不报错，跳过这步)

import pdf from 'vue3-pdf'

找到你自己项目里面的xx.d.ts，加入如下声明：

declare module 'vue3-pdf'

然后就是具体的代码处理了

vue3-pdf(因为是要作展示用，而且文档不是很多页，因此不考虑加入上下翻页，全展示)

但是vue3-pdf通病，默认只展示第一页，所以需要获取页数，来通过v-for来把所有页都展示出来（如果页数多，再考虑做翻页操

作）

const iframeUrl:any = ref(""); const numPages = ref(); getNumPages方法需要再转iframeUrl之后调用，然后将numPages传递给vue const getNumPages = (iframeUrl:any) => { if(iframeUrl){ let loadingTask = pdf.createLoadingTask(iframeUrl.value) loadingTask.promise.then((pdf:{numPages:Ref;}) =>{ numPages.value = pdf.numPages }).catch((err:any) =>{ console.error('pdf 加载失败',err) } ) } }

vue-office/pdf

import { ref } from 'vue' //引入VueOfficePdf组件 import VueOfficePddf from '@vue-office/pdf' //引入相关样式 import '@vue-office/pdf/lib/index.css' const props = defineProps({ excel: { type: ArrayBuffer, default: null } }) .docx-calss { height: calc(100vh - 60px); }

【本文地址】

公司简介

联系我们