在网页上,如果我们下载的地址对应的是一个jpg文件,txt文件等,点击链接时,浏览器默认的是打开这些文件而不是下载,那么如何才能实现默认下载呢?

后端解决

这就是Content-Disposition设置的问题,如下都是java示例:

设置为inline,如果浏览器支持该文件类型的预览,就会打开,而不是下载:

response.setHeader("Content-Disposition", "inline; filename=111.jpg");

设置为attachment,浏览器则直接进行下载,纵使他能够预览该类型的文件。

response.setHeader("Content-Disposition", "attachment; filename=111.jpg");

特别说明:Chrome不设置Content-Type也会自动打开,如果是它可识别预览的文件。

前端解决

downloadIamge(imgsrc, name) {
var image = new Image()
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function() {
var canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
var context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
var url = canvas.toDataURL('image/png')
var a = document.createElement('a')
var event = new MouseEvent('click')
a.download = name || 'photo'
a.href = url
a.dispatchEvent(event)
}
image.src = imgsrc
}

解决vue、js 下载图片浏览器默认预览而不是下载的更多相关文章

  1. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  2. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  3. 移动端 js 实现图片上传 预览

    方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q ...

  4. JS实现图片上传预览效果:方法一

    <script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) ...

  5. js实现图片上传预览功能,使用base64编码来实现

    实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般 ...

  6. Vue.js 3.0 新特性预览

    总结起来,Vue 3 以下方面值得我们期待 : 更快 更小 更易于维护 更多的原生支持 更易于开发使用 完整的PPT:docs.google.com/presentatio… Evan 和 Vue 团 ...

  7. js实现图片上传预览

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. js实现图片上传预览功能,使用base64编码来实现

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. vue使用readAsDataURL实现选择图片文件后预览

    vue实现选择图片文件后预览 利用h5的api可以实现选择文件并实现预览 readAsDataURL 方法会读取指定的 Blob 或 File 对象.读取操作完成的时候,readyState 会变成已 ...

随机推荐

  1. 使用java8的方法引用替换硬编码

    背景 想必大家在项目中都有遇到把一个列表的多个字段累加求和的情况,也就是一个列表的总计.有的童鞋问,这个不是给前端做的吗?后端不是只需要把列表返回就行了嘛...没错,我也是这样想的,但是在一场和前端的 ...

  2. 浅析vue的两项原理

    一.vue双向绑定原理 Vue.js-作者为中国人尤雨溪 vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的se ...

  3. [bash]用于查找指定格式目录的程序

    功能: 在指定目录下查找符合yyyy-MM-dd(-d)nnn模式的目录名,例如2020-03-22-b888 目标目录情况: [root@localhost testfolder]# ll tota ...

  4. python基础:内置函数zip,map,filter

    一.zip zip,就是把俩list,合并到一起,如果想同时循环2个list的时候,可以用zip,会帮你轮流循环两个list 比如: l1=[1,2,3,4,5] l2=['a','b','c','d ...

  5. Roadblocks(POJ 3255)

    原题如下: Roadblocks Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 19314   Accepted: 6777 ...

  6. os.walk模块查找目录下的所有txt文件

  7. [LeetCode]739. 每日温度(单调栈)

    题目 根据每日 气温 列表,请重新生成一个列表,对应位置的输入是你需要再等待多久温度才会升高超过该日的天数.如果之后都不会升高,请在该位置用 0 来代替. 例如,给定一个列表 temperatures ...

  8. [SSM项目]二-项目设计和框架搭建

    一 10个实体类 选择Integer 而不是int的原因 :当值为空时,int类型会自动为其初始化,这是我们不希望的. 二 配置Maven 目录结构: src/main/java:业务代码 src/m ...

  9. docker部署LAMP架构并部署上线wordpress博客系统

    第一步:直接在镜像仓库拉取LAMP镜像 [root@ken-node3 ken]# docker pull tutum/lamp 第二步:查看已经获取到的镜像 [root@ken-node3 ken] ...

  10. maximo入门----用户使用提要

    其实七月初就知道自己要做maximo了,但是那个时候