请求pdf文件流并进行预览

最新推荐文章于 2024-05-08 14:21:21 发布

时清云

最新推荐文章于 2024-05-08 14:21:21 发布

阅读量1.2k

点赞数 7

分类专栏：工作学习总结笔记 javascript 文章标签： pdf pdf文件流请求pdf文件流进行预览

本文链接：https://blog.csdn.net/xiaolinlife/article/details/134602317

版权

笔记同时被 3 个专栏收录

110 篇文章 1 订阅

订阅专栏

javascript

107 篇文章 2 订阅

订阅专栏

工作学习总结

100 篇文章 6 订阅

订阅专栏

最近做了一个需求就是预览pdf等文件，不过后端返回的是一个文件流，需要前端做一定地处理才行。
我们来看一下具体的实现方式。预览pdf的插件使用的是pdf.js，具体请看这篇文章：pdf.js插件怎么控制工具栏的显示与隐藏

1、请求pdf文件流数据

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

getPdfStream(id,data,responseType = 'blob'){
   return request.get('/api/business/getPdfStream/'+id,{params:{...data},responseType:responseType})
}

2、把请求回来的文件流数据转化为url

<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>