前端下载图片、pdf、excel、world文件;前端下载图片和pdf文件;前端a标签下载图片和pdf文件;下载文件名称不生效原因。
参考文章1
参考文章2
以下的下载是,拿到了后端给的下载图片的接口地址url
> 方法1:将文本或者JS字符串通过 Blob 转换成二进制下载
优点:可以下载,也可以保存名称。
//文件流参数和图片名称
function downloadTxt(str, filename){let a = document.createElement('a')a.download = filenamea.style.display = 'none'let blob = new Blob([str])a.href = URL.createObjectURL(blob)document.body.appendChild(a)a.dispatchEvent(new MouseEvent('click'))document.body.removeChild(a)
}
> 方法2:原生的下载方法
优点:可以下载,也可以保存名称。 推荐!!!!
downLoadFileImg (fileUrl, fileName) {// fileUrl -- 后端下载地址 可能是拼接了文件id, fileName -- 下载文件名称// 可以下载 没名称// location.href = fileUrl// 可以下载 但是名称设置无效// let a = document.createElement('a')// a.download = fileName// a.href = fileUrl// a.dispatchEvent(new MouseEvent('click'))// 名称设置有效但是下载文件打不开// // let a = document.createElement('a')// // a.download = fileName //图片名称// // a.style.display = 'none'// // let blob = new Blob([fileUrl]) //图片地址// // a.href = URL.createObjectURL(blob)// // document.body.appendChild(a)// // a.dispatchEvent(new MouseEvent('click'))// // document.body.removeChild(a)// 会打开新的页面下载 但是没名称// const newWindow = window.open()// newWindow.document.write(// '<iframe width="100%" height="100%" src="' + fileUrl +// '" frameborder="0" allowfullscreen></iframe>'// )// newWindow.document.title = fileName// 可下载,名称也有效 -- 推荐const x = new window.XMLHttpRequest()x.open('GET', fileUrl, true)x.responseType = 'blob'x.onload = () => {const url = window.URL.createObjectURL(x.response)const a = document.createElement('a')a.href = urla.download = fileNamea.click()}x.send()},
> 方法3:a标签下载
a标签html5版本新增了download属性,用来告诉浏览器下载该url,而不是导航到它,可以带属性值,用来作为保存文件时的文件名,尽管说有同源限制,但是我实际测试时非同源的也是可以下载的。
对于没有设置Content-Disposition响应头或者设置为inline的图片来说,因为图片对于浏览器来说是属于能打开的文件,所以并不会触发下载,而是直接打开,浏览器不能预览的文件无论有没有Content-Disposition头都会触发保存:
其中:href是下载地址,download是下载名称;
href 的下载地址 和 当前网站地址 必须是 同源的 ,否则download名称不生效。
<a href="../../static/demo.jpg" download="demo.jpg" target="_blank">demo.jpg</a>
<!-- 直接打开 -->
<a href="/test.jpg" download="test.jpg" target="_blank">jpg静态资源</a>
<!-- 触发保存 -->
<a href="/test.zip" download="test.pdf" target="_blank">zip静态资源</a>
<!-- 触发保存 -->
<a href="https://www.7-zip.org/a/7z1900-x64.exe" download="test.zip" target="_blank">三方exe静态资源</a>
<!-- 直接打开 -->
<a href="/createQrCode?text=http://lxqnsys.com/" download target="_blank">二维码流</a>
<!-- 直接打开 -->
<a href="/getFileStream?name=test.jpg" download target="_blank">jpg流</a>
<!-- 触发保存 -->
<a href="/getFileStream?name=test.zip" download target="_blank">zip流</a>
<!-- 触发保存 -->
<a href="/getAttachmentFileStream?name=test.jpg" download target="_blank">附件jpg流</a>
<!-- 触发保存 -->
<a href="/getAttachmentFileStream?name=test.zip" download target="_blank">附件zip流</a>
方法4:a标签方式类似的还可以使用location.href
这2、3种方式的缺点也很明显,一是不支持post等其他方式的请求,二是需要后端支持
location.href = '/test.jpg'
还有其他的下载方式可以参考原文链接!
前端下载图片、pdf、excel、world文件;前端下载图片和pdf文件;前端a标签下载图片和pdf文件;下载文件名称不生效原因。相关推荐
- 图片转excel怎么弄?简单实用的方法
对于经常整理表格的我们来说,总会遇到以图片的形式发来了表格.如果表格内容比较少的话,手动输入就完事了,如果遇到特别多的话,想要把所有的数据都放进汇总表,那就要花很多时间.为了快速整理出这类表格,我们只 ...
- 前端vue项目-关于下载文件pdf/excel
最近在做一些需求,需要下载一些文件信息,最频繁的就是下载excel文件到本地了 看过了很多方法,做个整理吧哈哈哈哈 参考的文章链接: https://www.cnblogs.com/jiangweic ...
- 前端实现word、excel、pdf、ppt、mp4、图片、文本等文件的预览
关注公众号 前端开发博客,领27本电子书 回复加群,自助秒进前端群 大家好,我是漫步,明天有个抽奖,记得去参与.张鑫旭最新的CSS书,免费送10本 前言 因为业务需要,很多文件需要在前端实现预览,今天 ...
- SpringBoot中将图片和Excel表格打包成压缩文件供前端下载
一.需求: 今天碰到了一个需求,就是将COS对象存储的图片和后端的数据库查询出来的用户的信息的excel表格一起打包成一个压缩包提供给前端下载. 二.分析: 作者的思路是这样的: 从COS的存储地址拿 ...
- 文档在线预览(四)使用js前端实现word、excel、pdf、ppt 在线预览
文章目录 实现方案 一.docx文件实现前端预览 1.docx-preview 2.Mammoth 二.PDF文件实现前端预览 1.pdf.js 2.pdfobject.js 3.vue-pdf 4. ...
- h5页面如何预览excel文件_如何使用JavaScript实现前端导入和导出excel文件?(H5编辑器实战复盘)...
前言 最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...
- 如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)
前言 最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...
- vue实现纯前端导入与解析excel表格文件,导出Excel
一.安装相关依赖 npm install --save xlsx file-saver 二.使用 import * as XLSX from 'xlsx/xlsx.mjs' const FileSav ...
- 不用任何 js 库,纯前端导出数据到 Excel / CSV 文件就这么简单几行代码
最近实现的导出数据为表格的需求,不需要工具库,也不要后端实现,mark 一下. js 导出 excel 表格 最近工作中又遇到了将表格数据导出为 excel 表格的需求,我第一时间想到的是之前我的网站 ...
最新文章
- Oracle Cloud Native Framework推出云原生解决方案
- 4.3.3 IPv4地址
- Eclipse下Maven新建Web项目index.jsp报错完美解决(war包)
- SpringBoot异常处理ErrorController详解
- Java Hashtable size()方法与示例
- 分号可以用来分段么_阳台竟然可以这样装,别再忽视它了
- 【渝粤教育】国家开放大学2018年春季 0688-22T老年精神障碍护理 参考试题
- win8下IE10停止工作解决办法
- 光敏传感器介绍及其软件应用
- 中国省市区地址三级联动jQuery插件 - distpicker
- android自动打开软键盘,Android打开关闭软键盘
- 考研不歧视双非的院校计算机专业,21考研,保护一志愿不歧视“双非”的30所学校,值得收藏!...
- linkerd mysql_《Linkerd官方文档》在Kubernetes中运行Linkerd
- CLOUD01 - KVM构建及管理 virsh控制工具、镜像管理 虚拟机快建技术
- 微信自动邀请加群!!!
- 搭建node版本下载服务器(node版本高速镜像)
- 五:.net core(.NET 6)使用Autofac实现依赖注入
- 北京奥运会的谷歌Logo
- 纯CSS3编写的红色下拉导航菜单js特效代码
- Win RTX3070+cuda11.4+cuDNNv8.2.2+torch-gpu离线安装+tensorflow-gpu安装
热门文章
- 七巧板图像识别 java_一种基于图像处理的七巧板图形识别方法.doc
- crontab 每天凌晨12点定时器_梦幻西游:梦幻西游冷知识,每天中午12点,哪个NPC最火?...
- 外贸邮箱用什么好?如何绑定随心邮?
- 在webpack中使用vue的准备
- oracle deferred_segment_creation,deferred_segment_creation 参数
- 思科网络安全 第十二章测验答案
- 一、领域驱动设计核心思想与设计过程
- 2022安徽最新八大员之(安全员)模拟考试试题及答案
- JavaScript延迟执行,定时器
- php返回数据格式化类