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

一、使用插件

插件名称: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

二、代码实现

javascript 复制代码
// 引入组件 (在需要使用的页面中直接引入)
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);
      })
相关推荐
wsxqaz2 小时前
浏览器原生控件上传PDF导致hash值不同
算法·pdf·哈希算法
工业3D_大熊10 天前
3D模式格式转换工具HOOPS Exchange如何将3D PDF转换为STEP格式?
3d·pdf·3d格式转换·3d模型格式转换·cad格式转换·cad数据格式转换·3d模型可视化
IDRSolutions_CN10 天前
在 Java 中生成 PDF 缩略图(教程)
java·经验分享·pdf·软件工程·团队开发
IDRSolutions_CN10 天前
用Java将PDF转换成GIF
java·经验分享·pdf·软件工程·团队开发
贤和兄10 天前
使用docx4j 实现word转pdf(linux乱码处理)
linux·pdf·word
Eiceblue11 天前
高效打印 PDF 文档:基础操作与自动打印(含C# .NET方案)
pdf·c#·.net
沉到海底去吧Go11 天前
【工具教程】PDF指定区域OCR识别重命名工具使用教程和注意事项
pdf·ocr·图片区域识别改名·仓储物流单据识别·物流单据识别改名·pdf区域识别改名·pdf区域识别重命名
开开心心就好11 天前
高效批量转换Word到PDF的方法
javascript·安全·智能手机·pdf·word·objective-c·lisp
response_L11 天前
麒麟v10、uos系统在线批量生成pdf文件
java·pdf·word·pageoffice·在线编辑
SEO-狼术11 天前
Easily Fill Out PDF Forms Crack
pdf