将后端返回的网络url转成blob对象，实现pdf预览

2024/10/25 1:31:20 来源：https://blog.csdn.net/qq_51463650/article/details/143209345 浏览: 次关键词：将后端返回的网络url转成blob对象，实现pdf预览

调用e签宝返回的数据是网络链接就很让人头疼，最后想到可以转换成blob对象，便在百度上找到方法，记录一下。

祝大家节日快乐！！

代码在最后！！！！
代码在最后！！！！
代码在最后！！！！
代码在最后！！！！

**最后的预览页面还是使用pdfjs，可以看我之前写的文档就知道如何使用pdfjs啦！！**文末有链接

调用e签宝返回的数据

返回的数据是网络链接就很让人头疼，最后想到可以转换成blob对象，便在百度上找到方法，记录一下。
在这里插入图片描述

步骤展示

1.先组装数据，然后传递给转换为blob对象的方法

在这里插入图片描述

2. 初始化 axios 实例

重点设置 axios
responseType: ‘blob’,
withCredentials: false
初始化 axios 实例
缺一不可

在这里插入图片描述

3. 转换方法

在这里插入图片描述

复制即用

//最后的预览页面还是使用pdfjs，可以看我之前写的文档就知道如何使用pdfjs啦！！
//链接：https://blog.csdn.net/qq_51463650/article/details/137716310?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522924ABB9F-E18A-4CC7-B015-61A74C042A0E%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=924ABB9F-E18A-4CC7-B015-61A74C042A0E&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-137716310-null-null.nonecase&utm_term=pdfjs&spm=1018.2226.3001.4450//查看附件
const openPdfFun = (fileId) => {//e签宝 查看附件接口authManageESignApi.findUpdateStatus(fileId).then(res => {if (!res.data.fileDownloadUrl) {showToast("预览失败")}let file = {id: res.data.fileId,name: res.data.fileName,filePath: res.data.fileDownloadUrl,}getFileData(file)}).catch(e => {showToast("预览失败")})}// 重点设置 axios
// responseType: 'blob',
// withCredentials: false
// 初始化 axios 实例
const ajaxDownloadFile = axios.create({baseURL: '',responseType: 'blob',withCredentials: false,headers: {'Content-Type': 'application/json; charset=UTF-8'}
});// 请求方法
const getFileData = (file) => {return new Promise((resolve, reject) => {ajaxDownloadFile({url: file.filePath,method: 'get',params: {attname: file.fileName}}).then(res => {let pdfData = res.data;  //pdfData是后端返回的文件流pdfData.fileId = file.idpdfData.filename = file.name;let blob = new Blob([pdfData], {type: 'application/pdf;charset=UTF-8'})pdfData = window.URL.createObjectURL(blob) //创建预览路径let agreementUrl = encodeURIComponent(pdfData)router.push({path: '/filePreview', query: {url: agreementUrl, pdfData: pdfData}})// resolve(res);}).catch(error => {console.error(error);reject();});});
}