请求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>
相关推荐
wh39339 小时前
使用Python将PDF转换成word、PPT
python·pdf·word
开开心心就好21 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
念九_ysl1 天前
Java 使用 OpenHTMLToPDF + Batik 将含 SVG 遮罩的 HTML 转为 PDF 的完整实践
java·开发语言·pdf
一头生产的驴1 天前
java整合itext pdf实现自定义PDF文件格式导出
java·spring boot·pdf·itextpdf
开开心心就好2 天前
批量PDF转换工具,一键转换Word Excel
开发语言·前端·学习·pdf·电脑·word·excel
老家的回忆3 天前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
Vertira3 天前
pdf 合并 python实现(已解决)
前端·python·pdf
十一0829933 天前
【PDF-XSS攻击】springboot项目-上传文件-解决PDF文件XSS攻击
spring boot·pdf·xss
qq_393828223 天前
PDF的图片文字识别工具
windows·pdf·电脑·软件需求·图片处理
wsxqaz3 天前
浏览器原生控件上传PDF导致hash值不同
算法·pdf·哈希算法