vue 后台返回的文件流进行预览_vue-pdf预览和下载，后台返回文件流(blob)

蔚落 2022-10-28 03:47 643阅读 0赞

背景：碰到了在当前页面预览pdf(不打开新的窗口，采用iframe)，并下载。

一、pdf的预览

1.在适合位置嵌入iframe标签

2.在methods中添加相应方法

pdfPreview(val) \{

this.previewDownFile(val).then(v => \{

if (v.status == 200) \{

const binaryData = \[\];

binaryData.push(v.data);

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

this.pdfUrl = url

\} else \{

this.$message.error("请求错误！");

\}

\})

\},

previewDownFile(val) \{

return new Promise((resolve, reject) => \{

this.$axios(\{

url: \`file-server/download/annex/$\{val.value\}\`,

timeout: 0,

method: 'get',

responseType: 'blob',

header: \{"Content-Type": "multipart/form-data"\},

\}).then(res => \{

resolve(res)

\}).catch(() => \{

resolve(false);

\});

\});

\},

二、pdf的下载

pdfUpdate() \{

this.previewDown().then(v => \{

if (v.status == 200) \{

if (!v) \{

return;

\} else \{

const elink = document.createElement("a");

// console.log(new Blob(\[v.data\]));

elink.href = window.URL.createObjectURL(new Blob(\[v.data\], \{type: \`application/pdf\`\}));

elink.style.display = 'none';

elink.setAttribute('download', this.tabData.dataCateName);

document.body.appendChild(elink);

elink.click();

URL.revokeObjectURL(elink.href); // 释放URL 对象

document.body.removeChild(elink);

\}

\}

\})

\},

previewDown() \{

return new Promise((resolve, reject) => \{

this.$axios(\{

url: \`file-server/download/$\{this.emitData.fileId\}\`,

timeout: 0,

method: 'get',

responseType: 'blob',

header: \{"Content-Type": "multipart/form-data"\},

\}).then(res => \{

resolve(res)

\}).catch(() => \{

resolve(false);

\});

\});

\},

总结：其实但看代码还是蛮简单的。但是实际操作的时候，还是费了一番功夫。

发表评论取消回复

表情：

评论列表（有 0 条评论，643人围观）

还没有评论，来说两句吧...

相关阅读

相关 PDF.js + Vue 浏览器以只读方式打开PDF,后台返回文件流，前端实现预览pdf

如果你想光前端完成 office(xls,doc,ppt) 文件的预览,只能提供你这些库来使用 PDF http://mozilla.github.com/pdf.j

我会带着你远行/ 2023年07月17日 04:42/ 0 赞/ 7 阅读

相关 vue实现文件预览

1、可以预览图片、文档、视频等，视频需要安装视频预览插件：cnpm install --save video.js 2、代码：

比眉伴天荒/ 2023年01月13日 06:27/ 0 赞/ 746 阅读

相关文件预览

NonStaticResourceHttpRequestHandler.java import org.springframework.core.io.FileSys

分手后的思念是犯贱/ 2022年12月29日 14:15/ 0 赞/ 309 阅读

相关 vue word预览，excel预览，pdf预览

一、word预览–mammoth.js 安装：`npm install --save mammoth` tip：只能预览.docx文件 word.vue:

淩亂°似流年/ 2022年11月15日 11:13/ 0 赞/ 704 阅读

相关 vue 后台返回的文件流进行预览_vue-pdf预览和下载，后台返回文件流(blob)

背景：碰到了在当前页面预览pdf(不打开新的窗口，采用iframe)，并下载。一、pdf的预览 1.在适合位置嵌入iframe标签 2.在methods中添加相应方法

蔚落/ 2022年10月28日 03:47/ 0 赞/ 644 阅读

相关 vue-pdf 通过文件流预览pdf文件

前端预览pdf功能，后端返回文件流的形式 1 首先，下载vue-pdf > npm install vue-pdf -D 2 其次，模板里面引入vue-pdf > im

「爱情、让人受尽委屈。」/ 2022年08月30日 05:23/ 0 赞/ 2170 阅读

相关 JAVA读取文件流，设置浏览器下载或直接预览

最近项目需要在浏览器中通过URL预览图片。但发现浏览器始终默认下载，而不是预览。研究了一下，发现了问题： // 设置response的Header，注意这句，如果开启

旧城等待，/ 2022年05月29日 03:35/ 0 赞/ 621 阅读

相关 Django后台上传文件并预览

关于如何创建和使用Django的后台，可以参照[详细介绍如何使用Django的后台管理Admin][Django_Admin] 1、上传文件在model.py文件中，

比眉伴天荒/ 2022年04月24日 10:54/ 0 赞/ 227 阅读

相关 js下载后台返回的excel文件流

function download(filename) { var oReq = new XMLHttpRequest();

青旅半醒/ 2021年12月23日 23:11/ 0 赞/ 526 阅读

相关后台返回文件流，监听文件下载结束

1、后台正常返回流即可 @RequestMapping(value = "/download/fileword", method = RequestMethod.GE

刺骨的言语ヽ痛彻心扉/ 2021年12月23日 13:51/ 0 赞/ 327 阅读