vue 后台返回的文件流进行预览_vue项目-pdf预览和下载，后台返回文件流形式

背景：正好最近碰到了这种需求，记录下来，方便以后查看。

后端返回的文件流数据如下图所示：

后台返回数据.png

一、pdf的预览

一开始的时候百度了很多方法，有建议用pdfJs插件的，有iframe嵌套实现的，最后发现了一种及其简便的实现方法：

pdfPreview(url){

this.$http({

url: `account/registerOpen/${url}`,

method: 'get',

responseType: 'arraybuffer', //一定要设置响应类型，否则页面会是空白pdf

params: { accountId: id, lang: 'en_US' }

}).then(res => {

const binaryData = [];

binaryData.push(res);

//获取blob链接

this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }));

window.open(this.pdfUrl);

}

});

}

二、pdf的下载

下载也挺简单的，代码如下：

pdfDownload(url){

const id = sessionStorage.getItem('idPdf').replace(/"/g, '');

this.$http({

url: `account/registerOpen/${url}`,

method: 'get',

responseType: 'arraybuffer',

params: { accountId: id, lang: 'en_US' }

}).then(res => {

// 下载pdf

if (url === 'PerPdf/download' || url === 'PerCrsPdf/download' || url === 'PerWbenContractPdf/download') {

//type类型可以设置为文本类型，这里是pdf类型

this.pdfUrl = window.URL.createObjectURL(new Blob([res], { type: `application/pdf` }));

const fname = `个人开户资料`; // 下载文件的名字

const link = document.createElement('a');

link.href = this.pdfUrl;

link.setAttribute('download', fname);

document.body.appendChild(link);

link.click();

}

});

}

vue 后台返回的文件流进行预览_vue项目-pdf预览和下载，后台返回文件流形式相关推荐

vue导出excel加一个进度条_vue项目中如何把数据导出成excel文件
Loading... 关于vue中如何把数据导出成excel文件 ### 1. 安装依赖 ``` yarn add file-saver yarn add xlsx yarn add script-l ...
php 复制文件夹并压缩到最小_【实用】PHP实现下载与压缩文件的一些方法的封装与整理...
[实用]PHP实现下载与压缩文件的一些方法的封装与整理龙行 PHP 2019-3-11 1590 1评论一.PHP实现打包zip并下载功能 $file_template = ...
vue 怎么在字符串中指定位置插入字符_vue项目中在可编辑div光标位置插入内容的实现代码...
vue项目中在可编辑div光标位置插入内容 html: @dragstart="dragStart($event, item.labelName)" draggable='true ...
vue 父组件获取接口值传到子组件_vue 项目中 “父组件” 异步获取数据之后，传递给子组件不显示...
有两个组件:一个为 transaction(父组件),一个为 transactionList (子组件): 上图为一个列表页,为父组件,在父组件里面的data中定义了数据列表, template中: ...
Keil 5(MDK 5)中的 Pack Installer下载不了库文件包的解决替代方法（在Keil官网下载Packs库文件）
想要使用keil自带的Pack Installer安装一些需要的软件包,但是Pack Installer经常出现各种问题,导致安装不了,比如: 其实我们可以先去网站把库文件包下载下来,然后自己导入就可 ...
Spring Boot如何实现在线预览？这个开源项目可以学习一下，支持99%常用文件！...
Spring Boot上传文件,相信你一定会了.如果还不会的小伙伴,可以先看看之前的分享: Spring Boot 2.x基础教程:实现文件上传 Spring Boot 2.x基础教程:多文件的上传 ...
在线预览Word、PDF、图片（IE、Edge、Google、FireFox等主流浏览器）
支持IE.Edge.Google.FireFox等主流浏览器处理在线预览Word.PDF.JPG.JPEG等格式文件或图片. var id=ID; if(id!=undefined){var hasI ...
前端在线预览word,excel,pdf
前端在线预览word,excel,pdf 预览Word 预览pdf 预览Excel 预览Word 微软的在线预览功能,可以预览word.ppt.Excel.PDF 局限: 需要外网能访问文件,如果是只 ...
原生JS实现文件自定义位置盖章功能并导出PDF
原生JS实现文件自定义位置盖章功能并导出PDF 实现原理在需要签章的文件上面创建一个div,可以通过移动这个div来确定签章位置,然后在通过获取这个位置把章子替换到这,并导出PDF,可以多次盖章! ...

vue 后台返回的文件流进行预览_vue项目-pdf预览和下载，后台返回文件流形式

vue 后台返回的文件流进行预览_vue项目-pdf预览和下载，后台返回文件流形式相关推荐

最新文章

热门文章