JS 下载 URL 链接文件(点击按钮、点击a标签、支持代理与非代理下载)

一、简介

dowload.js（导入项目即可使用，根据项目框架调整导出方式），Demo示例地址。
注意：a 标签中 download 属性可以更改下载文件的文件名。但是如果是跨域的话，download 属性就会失效，所以通过 a 标签下载的时候，传入的 filename 没有生效，则需要检查是否跨域了。
支持 原生 使用，也支持 Vue、React 等使用。

二、Vue 使用

vue.config.js 代理配置，配置文件有调整需要重新启动项目，注意：这里配置的代理，服务器端也需要配置上，否则无法生效，下载也会失败。

devServer: {// 端口号port: 8080,// 配置不同的后台API地址proxy: {'/dowload1': {target: 'https://gimg2.baidu.com',ws: false,changeOrigin: true,pathRewrite: {'^/dowload1': ''}},'/dowload2': {target: 'https://scpic.chinaz.net',ws: false,changeOrigin: true,pathRewrite: {'^/dowload2': ''}}}
}

页面使用

<template><div><div class="dowload-btn" @click="touchProxyDowload1">按钮-代理下载</div><div class="dowload-btn" @click="touchProxyDowload2">按钮-代理下载-自定义文件名</div><div class="dowload-btn"><a href="/dowload2/files/pic/pic9/202103/hpic3704.jpg" download>a标签-代理下载</a></div><div class="dowload-btn"><a href="/dowload1/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201311%2F17%2F174124tp3sa6vvckc25oc8.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618976641&t=ca698f4ed0e96eb2f269ccff644bda03" download="avatar.jpg">a标签-代理下载-自定义文件名</a></div></div>
</template>

<script>
import { DOWLOAD_FILE, DOWLOAD_FILE_PRO } from './dowload'
export default {data () {return {// 下载测试连接，百度随便搜的图片地址:// https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201311%2F17%2F174124tp3sa6vvckc25oc8.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618976641&t=ca698f4ed0e96eb2f269ccff644bda03// https://scpic.chinaz.net/files/pic/pic9/202103/hpic3704.jpg}},methods: {// 按钮-代理下载（代理配置存放在 vue.config.js，也可以放在服务器中配置）touchProxyDowload1 () {// 有后缀的则会使用当前后缀图片名称，也可以像上面那样自定义DOWLOAD_FILE('/files/pic/pic9/202103/hpic3704.jpg', '/dowload2')},// 按钮-代理下载-自定义文件名（代理配置存放在 vue.config.js，也可以放在服务器中配置）touchProxyDowload2 () {// 这种没有后缀的图片需要自己传入图片名称带后缀.png .jpg ...DOWLOAD_FILE_PRO('/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201311%2F17%2F174124tp3sa6vvckc25oc8.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618976641&t=ca698f4ed0e96eb2f269ccff644bda03', 'avatar.png', '/dowload1')}}
}
</script>

Demo效果

JS 下载 URL 链接文件(点击按钮、点击a标签、支持代理与非代理下载)相关推荐

python下载文件保存_python 3.3 下载固定链接文件并保存的方法
python 3.3 下载固定链接文件并保存. import urllib.request print ("downloading with urllib") url = 'htt ...
python3下载文件-python 3.3 下载固定链接文件并保存的方法
python 3.3 下载固定链接文件并保存. import urllib.request print ("downloading with urllib") url = 'htt ...
纯前端下载pdf链接文件,而不是打开预览的解决方案
纯前端下载pdf链接文件,而不是打开预览的解决方案参考文章: (1)纯前端下载pdf链接文件,而不是打开预览的解决方案 (2)https://www.cnblogs.com/jackson-yqj/ ...
ubuntu下载web链接文件
ubuntu下载web链接文件 #include <stdlib.h> main() { system("wget -O /home/keyu0915/桌面/19.c ...
mac 建立软链接_Mac中创建URL链接文件 | 玩转苹果
在Windows中,可以通过快捷方式的方法创建一个网址的链接,那么在Mac OS X中要如何创建呢? 其实在Mac中保存一个网址的链接到一个文件中很简单,通过拖拽浏览器地址栏左侧的网址图标到桌面上即可 ...
linux下载edk2链接文件
在文章的开始之前首先推荐一个微软相关系统,软件免费下载的良心网站:https://msdn.itellyou.cn/ 该网站上可以获得所以版本windows,office,vs,SQL 等全部版本的软 ...
迅雷不能下载download.php,迅雷无法下载磁力链接文件？一招解决问题
iphone可以下载迅雷吗? 你好!之前可以下载,现在不能了.原因是针对近期有说法称"'XcodeGhost'木32313133353236313431303231363533e58685e ...
html5 自动点击按钮,自动击键神器！一键实现自动点击功能！关键模拟应用
软件简介自动按钮工件可以将许多可自定义的功能绑定到长按/单击/双击/三次单击按钮,并且可以完成歌曲收藏夹,例如一键式网易云音乐/ QQ音乐,一键式支付宝/微信支付,一键微博等功能. 并且有许多内置功 ...
python下载url链接_使用Python从url地址下载所有pdf文件
我需要找到一种方法来下载给定url中的所有pdf文件,然后我找到了一个脚本,该脚本可能--我还没有测试过--完成了这个任务:import urllib.parse import urllib2 imp ...

JS 下载 URL 链接文件(点击按钮、点击a标签、支持代理与非代理下载)

一、简介

二、Vue 使用

JS 下载 URL 链接文件(点击按钮、点击a标签、支持代理与非代理下载)相关推荐

最新文章

热门文章