一、简介
- 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效果
