网站界面技术方案网站建设方案对比

一、使用插件

插件名称：vue-office/pdf
版本：2.0.2
安装插件：npm i @vue-office/pdf@^2.0.2
1、“@vue-office/pdf”: “^2.0.2”,
2、 npm i @vue-office/pdf@^2.0.2

二、代码实现

// 引入组件 （在需要使用的页面中直接引入）
import VueOfficePdf from '@vue-office/pdf'// 在页面中引用
<vue-office-pdf src="https://xxxxxx.net/view-pdf?path=20250120123710-19c66fa910634be9.pdf" style="height: 580px" />// 一 、如果后端返回的是文件url直接把文件url放在组件的src上就可以展示// 二、如果后端返回的是文件流 、需要前端将文件流转成url,在放在组件的src上才可以展示 
// 1、文件流如何转成 url? 代码如下getBlob({path:"20250120123710-19c66fa910634be9.pdf"}).then((res:any)=>{}).finally(async ()=>{// 'https://xxxxxx.net/view-pdf?path=20250120123710-19c66fa910634be9.pdf') 请求地址const response = await fetch('https://xxxxxx.net/view-pdf?path=20250120123710-19c66fa910634be9.pdf');const blob = await response.blob(); // 将文件流转换为 Bloburl.value = URL.createObjectURL(blob); // 将 Blob 转换为 URLconsole.log('url:',url.value,blob);})