前端实现文件下载的功能

1.第一种方法：downFile(下载地址, 保存名称);

function downFile(content, filename) {//创建隐藏的可下载链接var eleLink = document.createElement('a');eleLink.download=filename;eleLink.style.display= 'none';//字符内容转变成blob地址var blob = newBlob([content]);eleLink.href=URL.createObjectURL(blob);//触发点击
document.body.appendChild(eleLink);eleLink.click();//然后移除
document.body.removeChild(eleLink);
};

2.第二种方法：

<ahref="/api/getImg"download="file.xlsx">下载</a>

download：此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。如果属性有一个值，那么此值将在下载保存过程中作为预填充的文件名（如果用户需要，仍然可以更改文件名）。此属性对允许的值没有限制，但是 / 和 \ 会被转换为下划线。大多数文件系统限制了文件名中的标点符号，故此，浏览器将相应地调整建议的文件名。

注意：

（1）.仅适用于同源URL

（2）尽管 HTTP URL 需要位于同一源中，但是可以使用 blob: URL 和 data: URL，以方便用户下载使用 JavaScript 生成的内容

（3）如果 HTTP 头中的 Content-Disposition 属性赋予了一个不同于此属性的文件名，HTTP 头属性优先于此属性（后端一般会设置Content-Disposition: attachment; filename="filename.jpg"）

缺点：IE不支持download属性、只能下载不能被浏览器打开的文件类型，图片、文本文件、html这种类型的文件无法直接下载可以被浏览器打开的只能在浏览器中预览。

3、DataUrl或BlobUrl实现下载

通过DataUrl或BlobUrl可以实现图片、文本文件、html不预览直接下载，具体使用可以看这篇文章：https://blog.csdn.net/mo3408/article/details/90515277

4.location.href和iframe下载

（1） location.href = 'template.xlsx'

（2）：

//无闪现下载excel
functiondownload(url) {const iframe= document.createElement('iframe');iframe.style.display= 'none';functioniframeLoad() {console.log('iframe onload');const win=iframe.contentWindow;const doc=win.document;if (win.location.href ===url) {if (doc.body.childNodes.length > 0) {//response is error
}iframe.parentNode.removeChild(iframe);}}if ('onload' iniframe) {iframe.onload=iframeLoad;}else if(iframe.attachEvent) {iframe.attachEvent('onload', iframeLoad);}else{iframe.onreadystatechange= functiononreadystatechange() {if (iframe.readyState === 'complete') {iframeLoad;}};}iframe.src= '';document.body.appendChild(iframe);setTimeout(functionloadUrl() {iframe.contentWindow.location.href=url;},50);
}

5.应用

axios({method:'post',url:'/api/systemLog/downLoadLog',data: bodyData,responseType:'arraybuffer'}).then((res)=>{//type 为需要导出的文件类型，此处为xls表格类型const blob = new Blob( [res.data], {type: 'application/vnd.ms-excel'} )//兼容不同浏览器的URL对象const url = window.URL || window.webkitURL ||window.moxURL//创建下载链接const downloadHref =url.createObjectURL(blob)//创建a标签并为其添加属性let downloadLink = document.createElement('a')downloadLink.href=downloadHrefdownloadLink.download= '导出日志.xlsx'//触发点击事件执行下载
downloadLink.click()})

6.使用FileSaver插件：

链接：https://pan.baidu.com/s/1NhbGnrT8UBhg_oIuzk2nRA
提取码：kpju

备用地址：

链接：https://pan.baidu.com/s/1SIeIESll9nN57ETVB3mlbA
提取码：7178

FileSaver.js特点：

FileSaver.js 是一款基于 HTML5 完成文件保存的插件，它可以帮我们直接从网页中导出多种格式文件。

同时对于那些本身不支持 HTML5 W3C saveAs() FileSaver 接口的浏览器，FileSaver.js 也提供了支持。

使用 FileSaver.js 可以让 Web 应用完美的生成文件，或者保存那些不应该发送到外部服务器的敏感信息。是一种简单易用的浏览器端文件保存方案。

浏览器支持：

在需要使用的页面中将 JavaScript 文件引入即可。

保存文本：

<!DOCTYPE html>
<html><head><metacharset="utf-8"><title></title><scriptsrc="FileSaver.min.js"charset="utf-8"></script><scripttype="text/javascript">varblob= newBlob(["欢迎访问 hangge.com"], {type:"text/plain;charset=utf-8"});saveAs(blob,"文件导出测试.txt");</script></head><body></body>
</html>

可以看到浏览器会自动下载文件。同时打开文件发现内容也是正确的。
另一种写法等同于上面的效果：

var file = new File(["欢迎访问 hangge.com"], "文件导出测试.txt", {type: "text/plain;charset=utf-8"});
saveAs(file);

保存图片：

<!DOCTYPE html>
<html><head><metacharset="utf-8"><title></title><scriptsrc="FileSaver.min.js"charset="utf-8"></script><scripttype="text/javascript">functiononload() {//在canvas上绘制矩形varcanvas=document.getElementById("myCanvas");varcontext=canvas.getContext("2d");context.fillStyle= "blue";//填充颜色
context.fillRect(50,50,200,100);////绘制实心矩形//将canvas内容保存为文件并下载
canvas.toBlob(function(blob) {saveAs(blob,"hangge.png");});}</script></head><bodyonload="onload()"><canvasid="myCanvas"width="400"height="200"></body>
</html>

上面代码会在页面上的 Canvas 中绘制一个矩形，并将其自动导出成图片。

转载于:https://www.cnblogs.com/mo3408/p/10917826.html

前端实现文件下载的功能相关推荐

纯前端实现文件下载功能
一般情况下,想要实现文件下载/导出功能,需要在前端把数据发到服务端或者发送下载请求到服务端,然后由服务端通过获取数据 -> 生成数据 -> 生成文件三个步骤生成数据,在响应请求头中包含Co ...
学前端可以做哪些功能?
很高兴能回答你的问题,在分享前端可以做哪些功能之前,首先分享一下什么是前端开发,所谓的web前端开发是相对的概念,是相对网站后端开发而言的,凡是通过浏览器到用户端计算机系统的行为,都需要用到前端技术, ...
现代软件工程_团队项目_阿尔法阶段_前端及后端新增功能_v1.0.1_2017.11.29
前端及后端新增功能v1.0.2 本篇文章的后端功能由php实现,可在阿里云服务器上查看源代码一.实现功能简介: 注册新用户登录检验是否登录完善我的信息发布我的自习显示已有自习列表翻页查看 ...
html图片打印不出来 lodop_前端实现打印图像功能
前提:后台返回是绘制医用心电波形报告的数据,前端通过canvas在网页上绘制再进行打印并生成PDF文档! 一. 尝试LODOP打印插件之前前端表单打印功能有使用过LODOP打印插件,需安装相应的L ...
php web裁剪图片上传,WEB前端实现裁剪上传图片功能
最后的效果如下: 这里面有几个功能,第一个是支持拖拽,第二个压缩,第三个是裁剪编辑,第四个是上传和上传进度显示,下面依次介绍每个功能的实现: 1. 拖拽显示图片拖拽读取的功能主要是要兼听html5的 ...
前端vue实现分页功能
前端Vue实现分页功能我们都知道在spring boot项目中安装pagehelper可以实现分页功能,但是在vue中也能在前端实现分页. 1. 首先,在data中定义以下变量: data() {r ...
前端扫码枪扫码功能坑点集锦
前端扫码枪扫码功能坑点集锦 1.扫码枪无法识别中文问题 2.扫码枪在不同浏览器版本中不触发enter事件问题 3.接收二维码内容输入框设置autofocus属性在某些浏览器版本生效 4.将页面接收数据 ...
前端日历添加记事功能_通过添加实验室功能从Google日历中获取更多信息
前端日历添加记事功能 Recently we took a look at how you can take Gmail further by enabling some of the extra f ...
前端实现文件下载功能的三种方式
一些管理系统常常会有导出文件的功能,这里介绍三种文件下载的尝试 1. 通过文件地址下载文件此方式最为简易,只需要知道文件在服务器上的地址,就可以通过a标签实现下载 <a href=" ...
前端实现文件下载功能
在很多后台管理系统里可能会有导出表格,下载表格,下载压缩包等这样的需求.下面说几种简单的下载的方法: 1.最简单的,有文件的地址,直接使用a标签实现下载: <a href="/user ...

前端实现文件下载的功能

前端实现文件下载的功能相关推荐

最新文章

热门文章