请求pdf文件流并进行预览

最近做了一个需求就是预览pdf等文件,不过后端返回的是一个文件流,需要前端做一定地处理才行。

我们来看一下具体的实现方式。预览pdf的插件使用的是pdf.js,具体请看这篇文章:pdf.js插件怎么控制工具栏的显示与隐藏

1、请求pdf文件流数据

先看一下请求pdf文件流的请求接口

javascript 复制代码
getPdfStream(id,data,responseType = 'blob'){
   return request.get('/api/business/getPdfStream/'+id,{params:{...data},responseType:responseType})
}
2、把请求回来的文件流数据转化为url
javascript 复制代码
<template>
   <div>
     <iframe
        allowfullscreen="true"
        :src="contentUrl"
        frameborder="0"
        width="100%"
        height="1200px"
     ></iframe>
   </div>
</template>
<script setup>	
import {onMounted,ref} from 'vue'
let contentUrl = ref("")
let fileId = new URLSearchParams(location.hash.split("previewPdf?")[1]);
onMounted(()=>{
   getPdfContent(fileId)
})

// 获取pdf内容
function getPdfContent(fileId) {
   API.getPdfStream(fileId).then(res=>{
      // 这一步是关键,使用window.URL.createObjectURL把blob数据转为本地URL
      let url = window.URL.createObjectURL(new Blob([res.data]));
      
      contentUrl.value = `static/pdfjs/web/viewer.html?file=${url}`
   })
}
</script>
相关推荐
阿幸软件杂货间3 天前
Office转PDF转换器v1.0.py
开发语言·pdf·c#
reembarkation3 天前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
reembarkation3 天前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
Light603 天前
领码方案|Linux 下 PLT → PDF 转换服务超级完整版:异步、权限、进度(一气呵成)
linux·spring boot·pdf·gpcl6/ghostpcl·s3/oss·权限与审计·异步与进度
伟贤AI之路3 天前
【分享】中小学教材课本 PDF 资源获取指南
人工智能·pdf
东风西巷4 天前
PDFgear:免费全能的PDF处理工具
前端·pdf·软件需求
Sunny_yiyi4 天前
Java根据模版导出PDF文件
java·开发语言·pdf
小*-^-*九5 天前
php 使用html 生成pdf word wkhtmltopdf 系列2
pdf·html·php
千册5 天前
pyside6 的pdf显示测试 -- 01
开发语言·python·pdf
qq_172805595 天前
Go 语言 PDF 生成库综合比较与实践指南
开发语言·golang·pdf