精华内容
下载资源
问答
  • 前端实现下载文件-js实现a标签下载

    千次阅读 2021-01-19 16:29:57
    思路:使用a标签下载,点击下载时,创建a元素,模拟点击,下载完成后将a元素移除即可 // 导出文件 exportConfig(){ const content = output.replace(/(\n|\r)/gm,'\r\n') // 文件内容(此处我将后台返回的回车正则...

    思路:使用a标签下载,点击下载时,创建a元素,模拟点击,下载完成后将a元素移除即可

    // 导出文件
    exportConfig(){
    	const content = output.replace(/(\n|\r)/gm,'\r\n')  // 文件内容(此处我将后台返回的回车用正则匹配,否则txt文档中展示为空格)
    	const filename = '下载.txt'     // 文件名自定义
    	if("download" in document.createElement("a")){
    		const elink = document.createElement("a")
    		elink.download = filename
    		elink.style.display = "none"
    		elink.href = "data:text/paint;utf-8," + content
    		document.body.appendChild(elink)
    		elink.click()
    		URL.revokeObjectURL(elink.href)
    		document.body.removeChild(elink)
    	}
    }
    
    展开全文
  • a标签实现文件流下载

    2021-09-14 14:21:55
    download属性不止可以实现下载,其属性值还可以规定下载时的文件名,如果填写,会自动使用默认文件名。 <a href="地址" download="test.pdf">download</a> 很遗憾,兼容性佳,本人实际测

    a标签实现文件流下载

    方法1:

    <a href="地址">download</a>
    

    对于 txt , jpg , pdf 等浏览器支持直接打开的文件不会被执行下载,而是会直接打开,这时候一个新属性就要上场了–【download】

    download属性不止可以实现下载,其属性值还可以规定下载时的文件名,如果不填写,会自动使用默认文件名。

    <a href="地址" download="test.pdf">download</a>
    

    很遗憾,兼容性不佳,本人实际测试结果也同上图一致。但是,虽然不兼容,但不代表完全不支持,IE 和 Safari 不会直接下载,但是会有下载提示框弹出,只是多绕了一步而已。如果不想借助后台而要实现文件下载,给a标签加download绝对是首选之策。
    在这里插入图片描述
    方法2:

    const oa = document.createElement('a');
    oa.href = url;
    oa.setAttribute('target', '_blank');
    document.body.appendChild(oa);
    oa.click();
    document.body.removeChild(oa);
    

    方法3:

    const parm = '\u003cscript\u003elocation.replace("' + url + '")\u003c/script\u003e';
    const str = 'javascript:window.name;'
    window.open(str, parm);
    
    展开全文
  • 前端a标签实现文件下载

    千次阅读 2021-03-17 09:10:58
    a标签实现文件下载 如果想通过纯前端技术实现文件下载下载的静态文件放项目路径下, A标签下载,herf指定项目路径,加上download属性。 a链接默认的是在同一页面打开,如果我们需要打开新的页面,就需要添加...

    a标签实现文件下载

    如果想通过纯前端技术实现文件下载,

    1. 下载的静态文件放项目路径下,
    2. A标签下载,herf指定项目路径,加上download属性。
    3. a链接默认的是在同一页面打开,如果我们需要打开新的页面,就需要添加target=’blank’来设置。
    <a target=’blank’ href="../../../static/images/Promise.pdf" download="下载Promise.pdf">点击下载</a>
    
    

    download也可以不给值,这样就会使用默认的文件名。

    遇到问题:下载名称中文问题,浏览器兼容问题。下载文件名最好英文。

    在这里插入图片描述

    展开全文
  • 问题想要实现一个点击下载文件的功能,但当文件是txt,png之类的能被浏览器直接打开的文件,浏览器就会自动打开而不会执行下载原因首先要知道的是 媒体类型(通常称为 Multipurpose Internet Mail Extensions 或 MIME...

    问题

    想要实现一个点击下载文件的功能,但当文件是txt,png之类的能被浏览器直接打开的文件,浏览器就会自动打开而不会执行下载

    原因

    首先要知道的是 媒体类型(通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 )的概念,它表示传递的数据类型(图像/文本/音频等等)

    浏览器通过请求头Content-Type中的MIME类型(如 image/jpeg application/pdf)识别数据类型,对相应的数据做出相应处理,而对于图像文本等浏览器可以直接打开的文件,默认处理方式就是打开

    两种解决办法

    方法一 后台设置响应头

    Content-Disposition: attachment; filename="filename.jpg"

    Content-Disposition 该响应头表示请求返回的内容该以何种形式展现

    第一个参数默认值为 inline 表示回复中的消息体会以页面的一部分或者整个页面的形式展示;attachment 意味着消息体应该被下载到本地;大多数浏览器会呈现一个“保存为”的对话框

    第二个参数filename 为可选参数,为保存框中预填的文件名

    后端设置好后前端直接通过 a标签访问即可

    方法二 通过字节流的形式在前端生成文件

    // 这里写成一个点击事件的处理函数

    const handleDownload = (e, url) => {

    e.preventDefault();

    e.stopPropagation();

    fetch(url).then((res) => {

    res.blob().then((blob) => {

    const blobUrl = window.URL.createObjectURL(blob);

    // 这里的文件名根据实际情况从响应头或者url里获取

    const index = url.lastIndexOf('/');

    const filename = url.slice(index + 1);

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

    a.style.display = 'none';

    a.href = blobUrl;

    a.download = filename;

    document.body.appendChild(a);

    a.click();

    document.body.removeChild(a);

    window.URL.revokeObjectURL(blobUrl);

    });

    }).catch((error) => {

    console.log('文件下载失败', error);

    });

    };

    上面通过原生fetch请求,动态生成一个a标签实现文件下载

    res.blob() 该方法将后端返回的字节流转换为返回blob的Promise;blob(Binary Large Object)是一个二进制类型的对象,记录了原始数据信息

    URL.createObjectURL(blob) 该方法的返回值可以理解为一个指向 传入参数对象的url 可以通过该url访问 参数传入的对象

    该方法需要注意的是,即便传入同一个对象作为参数,每次返回的url对象都是不同的

    该url对象保存在内存中,只有在当前文档(document)被卸载时才会被清除,因此为了更好的性能,需要通过URL.revokeObjectURL(blobUrl) 主动释放

    在实际项目中还要注意的是请求时的 跨域 和 鉴权 问题

    踩坑记录

    给a标签添加download属性,此属性指示浏览器下载URL而不是导航到它,download的值会作为预填充的文件名,问题是 此属性仅适用于同源 URL ,跨域无效

    window.open()

    Window 接口的 open() 方法,是用指定的名称将指定的资源加载到浏览器上下文(窗口 window ,内嵌框架 iframe 或者标签 tab )。如果没有指定名称,则一个新的窗口会被打开并且指定的资源会被加载进这个窗口的浏览器上下文中

    说白了就是新开个窗口打开资源链接,浏览器能打开的还是会自动打开不会下载

    以上哪里不对望大佬们指正

    展开全文
  • escape编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z encodeURI编码字符有82个:!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z encodeURIComponent编码字符有71个...
  • vue Element UI 前端使用 a标签 get 通过文件流 实现下载功能 1、定义按钮 <el-button @click="downloadSelection" >下载选中职员信息</el-button> 2、实现a标签下载函数 //下载选中的职员信息 ...
  • 实现a标签实现文件下载,是使用的相对路径下载。 js代码 a class="btn btn-success btn-sm" href="../docs/doc/" title="下载" mce_href="#">i class="fa fa-arrow-circle-down">i>a> 这样用户在点击这个...
  • 日常工作中,通过a标签下载文件也是相当常见的场景。(后端返回二进制文件流) 每一行都有写注释,就做过多描述,直接上代码 /** * @description:签到资料导出 */ handleExportExcel(){ this.exportRequest(`${...
  • 还可以实现文件的保存,直接设置a标签的href属性,但是如果文件是txt文本或者png,jpg等格式的,浏览器是直接打开文件,而不会执行下载任务,这时候需要给a标签添加一个属性:download,例如:<a href="img.png" d...
  • 一、前端使用a标签直接下载问题 // 最开始 <a href="static/shijainmuban.xlsx" download="系统运行时间模板.xlsx">系统运行时间模板下载</a> //问题 中文文件名 //解决: 借用download属性,路径文件改...
  • a标签实现下载文件或称导出文件

    万次阅读 2018-11-02 12:00:56
     java后台只能做到返回二进制流或文件给前端,最终在前端页面创建一个a,然后触发a的点击事件实现点击下载效果。 接口: export function exportfile_goods(jsonobj){ // 导出商品文件 ...
  • 今天完善项目,需要用到模板下载功能,模板我是放在 resource/static 下,然后觉得没必要走后端下载,浪费服务器资源,想直接通过前端调用浏览器下载,经过win10的edge和Chrome浏览器测试,达到我的预期要求: ...
  • 这两种方法下载的文件都不会乱码,但是 不管使用哪种方法,发送请求都要设置 responseType 如果打算了解直接使用,请通过目录或者直接点击跳转 四、主要完整代码 方法一:使用Blob对象 Blob对象表示一个可变、...
  • 通过隐藏iframe实现文件下载,不可思议吧,但确实是可以实现的,懂的看下代码,或许可以帮助到你,而且此功能是js实现的,感兴趣的你可不要错过了哈
  • a标签/js下载文件(2020)

    千次阅读 2020-06-18 10:24:45
    Disposition(响应)和文件名(可选)4、文件下载二、URL下载1、a标签的href属性2、a标签的download属性3、下载文件4、download属性的限制5、跨域文件下载解决方案-后端6、跨域文件下载解决方案-前端(鸡肋)7、跨域...
  • 道理也很简单,为一个下载按钮添加click事件,点击动态生成一个表单,利用表单提交的功能来实现文件的下载(实际上表单的提交就是发送一个请求) 来看下如何生成一个表单,生成怎么样的一个表单: /** 下载文件 @...
  • 将HTML页面转化为PDF下载前端经常会遇到的需求,下面就列举两种方式进行实现。以下两种方式默认都是在Vue项目环境下,其他框架项目自行灵活运用。方式一:使用html2canvas和jspdf插件实现该方式是通过html2canvas...
  • 多说,直接上代码: 后端 package com.ly.travelaround.cms.common.utils; import org.apache.poi.hssf.usermodel.*; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import javax.servlet....
  • jsp页面通过超链标签下载文件,文件名包含中文,下载乱码,英文和数字可以正常下载,根据网上的方法试了很多次还是解决了,困扰一天了,现在是凌晨1点这个问题搞得我睡着,各位老哥帮小弟看看是 哪里错了![图片说明]...
  • 将HTML页面转化为PDF下载前端经常会遇到的需求,下面就列举两种方式进行实现。以下两种方式默认都是在Vue项目环境下,其他框架项目自行灵活运用。 方式一:使用html2canvas和jspdf插件实现 该方式是通过...
  • 注意到第一个值项是attachment,这是真正的关键,设定了...使用a标签下载时,如果txt文件。如果设置inline.会自动在浏览器打开,不会出现下载弹窗。 需要 上传文件,文件类型就设置为:ContentDisposition:attach
  • 前端实现文件下载功能

    万次阅读 2018-06-12 17:17:04
    最简单的,有文件的地址,直接使用a标签实现下载: &lt;a href="/user/test/xxxx.txt" download="文件名.txt"&gt;点击下载&lt;/a&gt; 但是有个情况,比如txt,png,jpg等这些...
  • 用a标签的download属性,下载一个txt的文件,文件内容是js下的字符串,然后本人blob装成二进制流,在URL.createObjectURL生成href地址。然后赋给a标签。但是每次遇到字符串中有中文,就会出现txt文本编码自动...
  • 在做项目的时候经常会碰到上传下载,通常在上传完文件以后会把文件在项目中的相对路径存到数据库以便下载,如果想直接下载文件,通过后台action,则可以直接把文件路径给a标签的href属性,例如: <a href="/...
  • a标签实现文件下载

    千次阅读 2017-12-27 15:26:00
    如果想通过纯前端技术实现文件下载,直接把a标签的href属性设置为文件路径即可,如下: &lt;a href="./calamus.pdf"&gt;下载&lt;/a&gt; 但是,对于 txt , jpg , pdf 等浏览器...
  • 但要注意的是,如果文件是pdf或者是浏览器默认支持打开预览类型文件,这样的方式进行下载能阻止浏览器针对文件下载完成后进行的默认行为,并且如果前端是进行循环调用此方法,针对浏览器会默认打开预览的文件...
  • 问题:前端js下载文件后缀名多出一个下划线 在打印的时候发现文件名啥啥啥的都没问题,创建的元素似乎也没问题。 但是呢结果?多了个下划线。 原因 细心的你可能发现了a标签的dounload的内容是双层双引号。具体...
  • 文章目录文件下载利用a链接下载文件如果项目需要通过header鉴权,要设置header什么的Blob对象FileReader文件上传利用input标签 设置 type="file" 文件下载 利用a链接下载文件 let aLink = document.createElement('a'...
  • 1.使用 a 标签进行文件下载时,download 属性主要是用来设置默认文件名称的,可以加。只要给了文件下载的 href 地址,a 标签就可以完成下载。对于图片、pdf类的文件,我们一般需要加 download,告诉浏览器,下载这...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,372
精华内容 8,148
关键字:

前端用a标签实现下载时怎样不使用默认文件名

友情链接: WatchX-master.rar