前端手把手教你js实现附件预览和下载得功能实现

在项目中，经常会遇到做项目关于实现附件预览和下载得功能，那么怎么来实现呢：

在学习之前，首先会应用到Blob相关得知识点：

那么blob到底是什么呢

先让我们看看官方关于blob得介绍

文章来自于Blob - Web API 接口参考 | MDN (mozilla.org)

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob，继承了 blob 的功能并将其扩展以支持用户系统上的文件。

先让我们直接上代码：

文件下载实现代码逻辑：

  downloadFile(file.fileId).then((res) => {const blob = new Blob([res.data]);const href = URL.createObjectURL(blob);// 创建新的URL表示指定的blob对象const a = document.createElement('a');// 创建a标签a.style.display = 'none';// 指定下载链接a.href = href;// 指定下载文件名a.setAttribute('download', targetFile.name);a.click();// 触发下载URL.revokeObjectURL(a.href);// 释放URL对象})

file.fileId是文件id

文件预览实现逻辑：

 downloadFile(file.fileId).then((res) => {const pdfFile = window.URL.createObjectURL(new Blob([res.data],{type: 'application/pdf'}));// 跳转页面预览window.open(pdfFile);URL.revokeObjectURL(pdfFile);//释放URL对象})

然后就可以预览和实现了

前端手把手教你js实现附件预览和下载得功能实现相关推荐

element图片预览添加下载图片功能.
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.element自带的大图预览,没有提供下载功能的api,而实际使用中总是有一些需求需要用到这个功能,所以只有自己对 ...
本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...
在项目中经常会用到js上传图片本地预览的效果,同时需要在预览图上直接预览截图的范围. 下面是我写的简单的demo,是用js结合cropper.js模拟实现此项前端的功能,后台则不考虑. 准备:引入文件 ...
前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
odoo14 ir.attachment附件上传与附件预览功能
一.附件上传这里收集了三种附件上传方式: 1.odoo自带附件上传安装odoo自带的附件列出及文档模块这样在编辑界面就可以看到附件上传按钮了(odoo14自己测试没成功,暂时不知道原因) 2. ...
如何实现上传多个图片并依次展示_js前端实现多图图片上传预览的两个方法(推荐)...
一.将图片转成icon码的实现方式 html代码: js代码 //图片预览功能 function previewImage(file,imgNum) { var MAXWIDTH = 200; var ...
附件预览（可用于图片、word文档、pdf、.xls表格等预览）
一.fileView.vue文件里的完整代码(fileView.vue即为抽离出的附件预览组件) 1.html部分 <template><div class="docCon ...
使用layui在前端接收后端的图片流来显示二维码,在前端使用iframe接收后端流来预览pdf
消息弹框的形式因为我是在生成二维码之后,用zxing的工具类输出的流所以这里介绍一下我用到的工具类的依赖 gradle // https://mvnrepository.com/artifact/ ...
php怎么实现打印预览,JavaScript_js实现局部页面打印预览原理及示例代码，最近有朋友问js 如何打印预览 - phpStudy...
js实现局部页面打印预览原理及示例代码最近有朋友问js 如何打印预览,今天就来讲解一下,首先了解一下打印原理,其实局部打印页面很简单.就是把你需要打印的部分做一个起始标记,至于标记如何写,随便你写什 ...
关于surface安装foxmail附件预览失效解决方案
surface安装foxmail附件预览失效/没反应说在前面的:为了支持与体验微软,买了一台surface,确实刷新了对笔记本电脑的认知,轻薄,触屏.键盘磁吸这才是正儿八经的的体验win10,同时已 ...

前端手把手教你js实现附件预览和下载得功能实现

前端手把手教你js实现附件预览和下载得功能实现相关推荐

最新文章

热门文章