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);
      })
相关推荐
engchina30 分钟前
Python PDF处理库深度对比:PyMuPDF、pypdfium2、pdfplumber、pdfminer的关系与区别
开发语言·python·pdf
浮桥32 分钟前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
Dxy123931021619 小时前
Python PDFplumber详解:从入门到精通的PDF处理指南
开发语言·python·pdf
荔枝hu1 天前
springboot生成pdf方案之dot/html/图片转pdf三种方式
spring boot·pdf·html
输出的都是我的1 天前
latex格式中插入eps格式的图像的编译命令
pdf
FreeBuf_2 天前
微软365 PDF导出功能存在本地文件包含漏洞,可泄露敏感服务器数据
服务器·microsoft·pdf
熊出没2 天前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
最懒的菜鸟2 天前
MinerU将PDF转成md文件,并分拣图片
人工智能·pdf
开开心心_Every3 天前
便捷的电脑自动关机辅助工具
开发语言·人工智能·pdf·c#·电脑·音视频·sublime text
用什么都重名3 天前
MinerU:高效智能PDF文档解析工具完全指南
人工智能·python·pdf·mineru·makedown