响应式网站制作工具,免费建站宝盒,旅游网络营销的特点有,最新购物平台最近做了一个需求就是预览pdf等文件#xff0c;不过后端返回的是一个文件流#xff0c;需要前端做一定地处理才行。 我们来看一下具体的实现方式。预览pdf的插件使用的是pdf.js#xff0c;具体请看这篇文章#xff1a;pdf.js插件怎么控制工具栏的显示与隐藏
1、请求pdf文件…最近做了一个需求就是预览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
templatediviframeallowfullscreentrue:srccontentUrlframeborder0width100%height1200px/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数据转为本地URLlet url window.URL.createObjectURL(new Blob([res.data]));contentUrl.value static/pdfjs/web/viewer.html?file${url}})
}
/script
