vue3 实现预览pdf的几种方式（vue3-pdf, iframe流展示，vue-office/pdf）

功能描述：

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

技术栈

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

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

1. multipartFile 直接转成byte[],保存到数据库配合菜单信息（业务不多做阐述）
2. 解析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: