当前位置：首页 > article >正文

PC端实现PDF预览（支持后端返回文件流 || 返回文件URL）

article 2025/1/26 15:08:16

一、使用插件

插件名称：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(); // 将文件流转换为 Blob
      url.value = URL.createObjectURL(blob); // 将 Blob 转换为 URL
        console.log('url:',url.value,blob);
      })