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

这篇具有很好参考价值的文章主要介绍了vue3 实现预览pdf的几种方式（vue3-pdf, iframe流展示，vue-office/pdf）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

功能描述：

要实现菜单（二级）绑定文件，并进行预览（点击菜单即触发），支持文件上传下载（绑定菜单）,文件以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:

<iframe :src="iframeUrl" style="position:absolute;">

可以预览，但是带了大框，页面分割感特别强，而且不同浏览器应该展示也不一样（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来把所有页都展示出来（如果页数多，再考虑做翻页操

作）

<div v-for="(item,index) in numPages" :key= "item">
	<pdf v-if="index>2" :src="iframeUrl" :page="item" style="wideth:90%;margin:-8px">
</div>

<!-- 因为我不是要全展示，前面三页是目录封皮，就跳过了   numPages通过一个方法获取-->
const iframeUrl:any = ref("");
const numPages = ref<any>();

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

vue-office/pdf文章来源地址https://www.toymoban.com/news/detail-601851.html

<template>
  <vue-office-pdf :src="iframeUrl" class="docx-calss" />
</template>

<script setup lang='ts'>
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
  }
})
</script>
<style scoped lang='scss'>
.docx-calss {
  height: calc(100vh - 60px);
}
</style>