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效果