vue 前端通过URL链接下载图片pnf等
提示:如果后端返回的链接是可以通过以下方法直接下载的可跳过本章节
window.open(url, ‘_blank’) //外部窗口打开下载
提示:解释一下如果上诉方法是在浏览器打开预览,无法下载图片或者pdf等,请看下方文章。
文章目录
- vue 前端通过URL链接下载图片pnf等
- 前言
- 一、window.open()是什么?
- 二、解决url下载功能,
- 1.在utils目录下创建dowload.js文件
- 2.页面写入
- 三、配置proxy代理
- 总结
前言
提示:为什么有的链接使用window.open()方法可以通过浏览器下载呢,window.open()是做什么的,下面给大家解释一下
一、window.open()是什么?
window.open()方法,这个方法的本身就是无法去下载http,https,链接的图片,pdf等
他的含义是导航到一个特定的url,也可以添加第二个参数选择是在内部打开,还是新建外部打开,哪为什么有的用这个方法可以下载文件的,而图片、pdf,就变成了预览了呢,是因为,浏览器会去解析你的地址,从而解析演变成了预览
二、解决url下载功能,
1.在utils目录下创建dowload.js文件
代码如下:
function DOWLOAD_FILE(url, proxy, proxyhttp) {
DOWLOAD_FILE_PRO(url, '', proxy, proxyhttp)
}
function DOWLOAD_FILE_PRO(url, filename, proxy, proxyhttp) {
// 下载地址
var dowloadURL = url
// 有代理链接地址,当前链接里面同时存在代理地址可以进行替换
if (proxyhttp && proxy && dowloadURL.includes(proxyhttp)) {
// 替换代理链接地址为代理协议
dowloadURL = dowloadURL.replace(proxyhttp, proxy)
// 代理链接下载
DOWLOAD_FILE_URL(dowloadURL, filename)
} else if (proxy) {
// 将下载链接匹配上代理协议
dowloadURL = proxy + dowloadURL
// 代理链接下载
DOWLOAD_FILE_URL(dowloadURL, filename)
} else {
// 链接下载
DOWLOAD_FILE_URL_PRO(dowloadURL, filename)
}
}
function DOWLOAD_FILE_URL(url, filename) {
// 创建一个a节点插入的document
var a = document.createElement('a')
// 模拟鼠标click点击事件
var event = new MouseEvent('click')
// 设置a节点的download属性值
a.download = DOWLOAD_FILE_NAME(url, filename)
// 将需要下载的URL赋值给a节点的href
a.href = url
// 触发鼠标点击事件
a.dispatchEvent(event)
}
function DOWLOAD_FILE_NAME(url, filename) {
// 文件名称
var fname = filename
// 没有文件名同时链接有值
if (!fname && url) {
// 获得最后一个斜杠坐标
const index = url.lastIndexOf('/')
// 从斜杆后一个坐标开始截取
fname = url.substring(index + 1)
}
// 返回
return fname
}
// 导出
module.exports = {
DOWLOAD_FILE
}
2.页面写入
代码如下:
<template>
<div>
<div class="dowload-btn"
@click="touchProxyDowload">按钮-代理下载</div>
</div>
</template>
<script>
import { DOWLOAD_FILE } from '@/utils/dowload'
export default {
data() {
return {}
},
methods: {
// 按钮-代理下载(代理配置存放在 vue.config.js,也可以放在服务器中配置)
touchProxyDowload() {
// 有后缀的则会使用当前后缀图片名称,也可以像上面那样自定义
DOWLOAD_FILE(
'https://.......',
'/dowload'
)
},
},
}
</script>
三、配置proxy代理
module.exports = {
devServer: {
// 端口号
port: 8080,
// 配置不同的后台API地址
proxy: {
'/dowload': {
target: 'https://......',
ws: false,
changeOrigin: true,
pathRewrite: {
'^/dowload': '',
},
},
},
},
}
总结
讲到这里就结束了,本人也是边学习边分享,觉得有用的,分享给大家。欢迎大家借鉴,代码来自GitHub上面一位大神写的,精简后自测可用,如不可用,可以去GitHub clone下全部代码 ,大家点赞收藏,以备不时之需。谢谢。
附上大神传送门https://github.com/dengzemiao/DZMH5Dowload.git
文章目录
- vue 前端通过URL链接下载图片pnf等
- 前言
- 一、window.open()是什么?
- 二、解决url下载功能,
- 1.在utils目录下创建dowload.js文件
- 2.页面写入
- 三、配置proxy代理
- 总结