使用迅雷SDK实现浏览器批量下载功能(vue)

需求场景

b/s模式下提出的批量下载, 断点续传, 进度监控等需求, 浏览器无法完成, 需要借助第三方下载工具, 这里选择迅雷, 因为他的开发文档完善, 用户接受度高

实现步骤

  1. 去迅雷官网下载sdk, 得到thunder-link.js

http://open.thunderurl.com/?entrypage=open_homepage#/

  1. 拷贝到工程的静态文件目录

webpack或者非webpack的项目都可以用这个库, 这里以vue项目为例
将thunder-link.js拷贝到 /public/lib/thunder-link.js
image.png

  1. 在public/index.html里引入, 见第9行
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="./lib/thunder-link.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
  1. 使用迅雷SDK
<template>
  <div>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="name" label="文件名称" width="120">
      </el-table-column>
      <el-table-column prop="address" label="下载地址" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="batchDownload()">批量下载</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        name: '文件1',
        address: 'https://www.baidu.com/index1.html'
      }, {
        name: '文件2',
        address: 'https://www.baidu.com/index2.html'
      }, {
        name: '文件3',
        address: 'https://www.baidu.com/index3.html'
      }, {
        name: '文件4',
        address: 'https://www.baidu.com/index4.html'
      }, {
        name: '文件5',
        address: 'https://www.baidu.com/index5.html'
      }, {
        name: '文件6',
        address: 'https://www.baidu.com/index6.html'
      }, {
        name: '文件7',
        address: 'https://www.baidu.com/index7.html'
      }],
      multipleSelection: []
    }
  },

  methods: {
    batchDownload() {
      if (this.multipleSelection == null || this.multipleSelection.length == 0) {
        this.$message('请勾选要下载的文件');
        return;
      }
      var tasks = []
      for (let i = 0; i < this.multipleSelection.length; i++) {
        const e = this.multipleSelection[i];
        tasks.push({
          name: e.name, // 指定下载文件名（含扩展名）。【若不填此项，将根据下载 URL 自动获取文件名】
          url: e.address // 指定下载地址【必填项】
        })
      }
      thunderLink.newTask({
        taskGroupName: "批量下载" + Date.now(),// 指定任务组名称，可将批量任务合并成类似BT任务的【任务组】，迅雷将在下载目录中创建同名子文件夹保存所有下载文件。【推荐填写。若不填此项，迅雷下载列表会显示所有本次创建的下载任务，可能会使用户的下载列表显得杂乱】
        downloadDir: '', // 指定当前任务的下载目录名称，迅雷会在用户剩余空间最大的磁盘根目录中创建这个目录。【若不填此项，会下载到用户默认下载目录】
        tasks: tasks
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
  1. 效果

image.png
image.png
image.png

posted @ 2022-03-20 19:32  iminifly  阅读(1242)  评论(0)    收藏  举报