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);
      })
相关推荐
一只花里胡哨的程序猿13 小时前
odoo打印pdf速度慢问题
pdf·odoo
灵海之森15 小时前
Python将md转html,转pdf
pdf
阿幸软件杂货间19 小时前
最新PDF版本!Acrobat Pro DC 2025,解压即用版
pdf·adobe acrobat·acrobat
星空的资源小屋21 小时前
网易UU远程,免费电脑远程控制软件
人工智能·python·pdf·电脑
会飞的小菠菜1 天前
如何一次性将多个PPT幻灯片批量转换成PDF文档
pdf·powerpoint·ppt·批量·格式转换
somethingGoWay1 天前
wpf .netcore 导出pdf文件
pdf·wpf·.netcore
小白电脑技术1 天前
PDF教程|如何把想要的网页保存下来?
pdf·电脑
我没想到原来他们都是一堆坏人2 天前
通过Gen AI SDK调用gemini 2.5 pro,单独上传pdf文件 | ai agent 开发笔记 2025.9.2 Day 2
ai·google·pdf·sdk·gemini
AI视觉网奇2 天前
麒麟系统 doc转pdf
linux·运维·pdf
CodeCraft Studio2 天前
国产化PDF处理控件Spire.PDF教程:如何在 Java 中通过模板生成 PDF
java·python·pdf·spire.pdf·java创建pdf·从html创建pdf