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);
      })
相关推荐
阿幸软件杂货间1 天前
Office转PDF转换器v1.0.py
开发语言·pdf·c#
reembarkation1 天前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
reembarkation1 天前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
Light602 天前
领码方案|Linux 下 PLT → PDF 转换服务超级完整版:异步、权限、进度(一气呵成)
linux·spring boot·pdf·gpcl6/ghostpcl·s3/oss·权限与审计·异步与进度
伟贤AI之路2 天前
【分享】中小学教材课本 PDF 资源获取指南
人工智能·pdf
东风西巷2 天前
PDFgear:免费全能的PDF处理工具
前端·pdf·软件需求
Sunny_yiyi3 天前
Java根据模版导出PDF文件
java·开发语言·pdf
小*-^-*九3 天前
php 使用html 生成pdf word wkhtmltopdf 系列2
pdf·html·php
千册3 天前
pyside6 的pdf显示测试 -- 01
开发语言·python·pdf
qq_172805593 天前
Go 语言 PDF 生成库综合比较与实践指南
开发语言·golang·pdf