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