js下载文件

这篇具有很好参考价值的文章主要介绍了js下载文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近一直在做上传,下载,预览等相关功能

今天记录一下js实现下载文件的方式:

方式一:a 链接下载:模拟a链接的点击,把后端返回的下载地址设置给a链接的href属性

let a = document.createElement('a');      //创建一个a标签用来跳转
a.href = myurl; //myurl 是后端返回的下载地址
// a.target = '_blank'; 
a.download = "xixi.zip";                  //设置下载文件的文件名和文件格式
document.body.appendChild(a);             //将标签DOM,放置页面
a.click();                              
window.URL.revokeObjectURL(myurl);     //释放 url 对象内存
document.body.removeChild(a);

方式二,文件流下载:

 request({
    url: `/fpUpload/download?id=${downloadIdStr.substring(0,downloadIdStr.length-1)}&fileType=${this.downloadFileType}`,
    responseType: 'blob',   //设置响应格式
    method: "get",
    }).then(res => {
    if(btnType == 1){
      this.tbButtonDisable = false;
    }else if(btnType == 2){
      this.ecButtonDisable = false;
    }else if(btnType == 3){
      this.cqButtonDisable = false;
    }
    
    downMsg.close();
    console.log(res, "--res");
    
    let blob = new Blob([res.data],{
      type:"application/zip"
    })
    let myurl = window.URL.createObjectURL(blob);
    console.log(myurl)
    let a = document.createElement('a');      //创建一个a标签用来跳转
    a.href = myurl; 
    // a.target = '_blank'; 
    a.download = decodeURI(res.headers['content-disposition'].split('filename=')[1])+".zip";                  //设置下载文件的文件名和文件格式
    document.body.appendChild(a);             //将标签DOM,放置页面
    a.click();                              
    window.URL.revokeObjectURL(myurl);     //释放 url 对象内存
    document.body.removeChild(a);
    
    
    
    
    }).catch(err => {
    // console.log(err)
    })

重要部分圈起来:

js下载文件,javascript,html,前端,Powered by 金山文档
js下载文件,javascript,html,前端,Powered by 金山文档

遇到的问题:

我现在拿到后端给我的流,按照上面的代码执行,他没下载直接在浏览器打开了那个url地址了

因为我这边下载的文件都是zip文件,所以指定 type application/zip

download ="文件名".zip

下载文件不用写a.target属性,去掉

改了以后就可以下载了,然后再说一下,文件名的获取方式:

参考文章:

https://www.cnblogs.com/jdWu-d/p/15513478.html

js下载文件,javascript,html,前端,Powered by 金山文档
js下载文件,javascript,html,前端,Powered by 金山文档
js下载文件,javascript,html,前端,Powered by 金山文档
js下载文件,javascript,html,前端,Powered by 金山文档
a.download = decodeURI(res.headers['content-disposition'].split('filename=')[1])+".zip"; 
js下载文件,javascript,html,前端,Powered by 金山文档
js下载文件,javascript,html,前端,Powered by 金山文档

注意拿到文件名后是一堆乱码,需要进行 decodeURI 转码操作

这块参考文章:

https://developer.aliyun.com/article/1086803

获取文件名可能遇到的问题:

network可以看到 Content-Disposition 值,但是控制台输出undefined,打印是无法获取的,是因为后端缺了一个步骤

js下载文件,javascript,html,前端,Powered by 金山文档

搞定啦!!!文章来源地址https://www.toymoban.com/news/detail-658071.html

到了这里,关于js下载文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端js下载zip文件异常问题解决

    目录 一,本文解决问题如下 二,原下载代码 1,ajax get 下载文件 2,下载异常图: 三,成功下载的 1, JQuery 实现文件下载xhr 2,图例 引言: 本人使用的ajax 下载,由于下载CSV,文本之类的没有问题,下载zip是出现各种问题。发现是设置responseType:\\\"blob\\\"没生效,项目中又没有

    2024年02月09日
    浏览(39)
  • 前端用原生js编辑文件内容→创建生成文件(格式可以自定义)→下载文件

    会自动创建一个html文件    前端实现下载文件的两种方法downloadFile_文件下载downloadfile_你挚爱的强哥的博客-CSDN博客 实现效果如上图。_文件下载downloadfile https://blog.csdn.net/qq_37860634/article/details/131022008 通过整合以上两个方法,合并为一个方法: 特性: 实现自主编写文件生成并

    2024年02月12日
    浏览(60)
  • 究竟会不会阻塞?HTML文档渲染中的CSS和JS文件下载探秘

    在Web前端开发中,网页的性能优化一直是一个重要的课题。其中,优化网页的加载速度尤为关键。本文将探讨一个常见的问题:HTML文档渲染过程中,CSS文件和JS文件的下载是否会阻塞渲染,以及如何处理这个问题。 阻塞渲染的问题 在讨论之前,我们需要了解一些关键概念。

    2024年02月11日
    浏览(37)
  • 纯前端--原生js将html页面变成pdf文件(html2canvas+jsPDF)

    1、将文档放在本地,用原生js进行引用和使用。 ① 新建一个名为 html2canvas.min.js 的文件,并且将线上的内容进行复制。 ② 引入 js 文件: 2、使用 npm 进行安装使用: 待续。。。 github 中文网站 CDN Jspdf.es.js:ES 2015 模块格式。 Jspdf.umd.js:UMD模块格式,用于 AMD 或脚本标签加载

    2024年02月08日
    浏览(61)
  • Discuz论坛网站标题栏Powered by Discuz!版权信息如何去除或是修改?

    当我们搭建好DZ论坛网站后,为了美化网站,想把标题栏的Powered by Discuz!去除或是修改,应该如何操作呢?今天飞飞和你分享,在操作前务必把网站源码和数据库都备份到本地或是网盘。   Discuz的版权信息存在两处地方,一个是标题栏,一个是底部。一般为了美化修改个标

    2024年02月08日
    浏览(83)
  • 【前端】关于如何将html、js、css等一个html网页打包成单一的exe可执行程序文件

    要将 HTML、JS、CSS 等一个 HTML 网页打包成单一的可执行程序文件(exe),通常需要使用一些工具和框架来实现的。 这里以Electron为例,详细说一下具体的打包过程 1.安装依赖: 确保已经安装了 Node.js。在命令行中进入你的项目目录,执行以下命令安装 Electron: 2.创建文件结构

    2024年02月11日
    浏览(57)
  • StreamSaver.js入门教程:优雅解决前端下载文件的难题

    点赞 + 关注 + 收藏 = 学会了 本文介绍一个能让前端优雅下载大文件的工具:StreamSaver.js ⚡️ StreamSaver.js GitHub地址 ⚡️ 官方案例 StreamSaver.js 可用于实现在Web浏览器中直接将大文件流式传输到用户设备的功能。 传统的下载方式可能导致大文件的加载时间较长或造成内存占用过

    2024年02月08日
    浏览(53)
  • [HTML]Web前端开发技术4(HTML5、CSS3、JavaScript )图像与多媒体文件hspace,vspace,scrollamount,bgcolor,marquee——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 图像与多媒体文件 网页文件常见的图像格式有: 图像 设置图像的替代文字 设置图像的宽度和高度

    2024年02月05日
    浏览(71)
  • (C#) IIS 响应标头过滤敏感信息(如:Server/X-Powered-By等) 运维知识

    再一次净网行动中,客户要求安全改造发现了接口请求的header标头中出现如图中的敏感信息。   其意义在于告知浏网站是用什么语言或者框架编写的。解决办法就是修改该响应头为一个错误的值,将攻击者导向一个错误的方向。 这里只说windows 的iis环境,不考虑其他服务器的

    2024年02月11日
    浏览(73)
  • JS-27 前端数据请求方式;HTTP协议的解析;JavaScript XHR、Fetch的数据请求与响应函数;前端文件上传XHR、Fetch;安装浏览器插件FeHelper

    早期的网页都是通过后端渲染来完成的,即服务器端渲染(SSR,server side render): 客户端发出请求 - 服务端接收请求并返回相应HTML文档 - 页面刷新,客户端加载新的HTML文档; 服务器端渲染的缺点: 当用户点击页面中的某个按钮向服务器发送请求时,页面本质上只是一些数

    2024年02月16日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包