前端 dlhelper 下载辅助库(支持链接后台下载、代理下载、Blob 数据下载,针对代理下载灵活使用)

简介: 前端 dlhelper 下载辅助库(支持链接后台下载、代理下载、Blob 数据下载,针对代理下载灵活使用)

一、简介

  • 一个简化前端下载功能的 js 辅助库,支持链接后台下载、代理下载、Blob 数据下载,针对代理下载灵活使用。
  • 当一个项目需要下载的素材资源有多个域名时,使用改库可以更好的实现辅助下载。

二、使用

  • 安装
$ npm i dlhelper
  • 引入
import * as dl from "dlhelper";
  • 案例:后台下载
dl.dlFetch(
  "https://test-public.juhaokanya.com/prod/aac5812fe2f6f3e1efeb6a86c8eb2867.png"
)
  .then(() => {
    console.log("下载成功");
  })
  .catch((err) => {
    console.log("下载失败");
  });
  • 案例Blob 数据下载
// 转成 Blob 对象
const blob = new Blob(["字符串"]);
// 进行下载,默认是 txt 文件,可通过传入文件名进行修改下载的文件类型
dl.dlBlob(blob);
dl.dlBlob(blob, "test.txt");
  • 案例:代理下载
  • main.js 配置代理标识与代理地址(可选
// 引入
import * as dl from 'dlhelper'
// 配置代理
dl.setProxy({
  // 代理标识: [代理地址, 代理地址]
  // 这么配置,当使用 dl.dlProxy() 传入 url 时,可传入 '/download/test.png'、'https://www.baidu1.com/test.png'、'https://www.baidu2.com/test.png', 全链接的会自动匹配代理地址,匹配成功替换成对应的代理标识
  // 后面的数组参数主要是为了存放正式地址、测试地址、预发布地址等
  '/download/': ['https://www.baidu2.com/', ...],
  '/download': ['https://www.baidu1.com', ...],
  '/test/': [],
  ...
})
  • 本地代理配置(项目配置文件中添加)
// 开发配置
devServer: {
  ...
  proxy: {
    // 代理配置
    '/download/': {
      target: 'https://www.baidu2.com/',
      ws: false,
      changeOrigin: true,
      pathRewrite: {
        '^/download/': ''
      }
    }
  }
}
  • 服务器代理配置(服务器 server 中添加,正测试都需要)
server {
  ...
  location /download/ {
    proxy_pass https://www.baidu2.com/;
  }
}
  • 项目中使用
// 使用这个必须配置 main.js
// 会跟配置好的代理进行校验
dl.dlProxy("/download/test.png");
dl.dlProxy("/download/test.png", "aaa.png");
dl.dlProxy("https://www.baidu1.com/test.png");
// 使用这个 main.js 配置可选
// 如果不想在 main.js 中配置 dl.setProxy(),可以在知道这是配好的代理下载链接时,直接通过代理链接下载(如:/download/test.png,不能是全链接,全链接没法匹配替换)
// 注意:dl.dlClick() 只能下载代理文件链接、同域名文件链接,像 'https://www.baidu1.com/test.png' 这种就是非代理链接了,上面支持是因为内部会进行匹配替换成代理标识
dl.dlClick("/download/test.png");
相关文章
|
8天前
|
前端开发
前端base64转Blob,Blob转文件下载
前端将base64字符串转换为Blob对象,再将Blob对象转换为文件并实现下载。包括处理数据URL和纯base64字符串的情况,并提供了一个辅助函数用于转换。
19 2
|
2月前
|
前端开发 JavaScript Serverless
中后台前端开发问题之通过低代码实现前后端交互如何解决
中后台前端开发问题之通过低代码实现前后端交互如何解决
35 0
|
2月前
|
前端开发 UED
中后台前端开发问题之中后台前端开发中的复杂交互问题如何解决
中后台前端开发问题之中后台前端开发中的复杂交互问题如何解决
28 0
|
2月前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
|
7天前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
9 0
|
2月前
|
运维 前端开发 Serverless
中后台前端开发问题之流程编排如何解决
中后台前端开发问题之流程编排如何解决
20 0
|
2月前
|
前端开发 算法 Serverless
中后台前端开发问题之保证用户的token等信息的唯一性和不可伪造性如何解决
中后台前端开发问题之保证用户的token等信息的唯一性和不可伪造性如何解决
31 0
|
2月前
|
前端开发 API 开发者
JSF与RESTful服务的完美邂逅:如何打造符合现代Web潮流的数据交互新体验
【8月更文挑战第31天】随着互联网技术的发展,RESTful架构风格因其实现简便与无状态特性而在Web服务构建中日益流行。本文探讨如何结合JavaServer Faces (JSF) 和 JAX-RS 构建RESTful API,展示从前端到后端分离的完整解决方案。通过定义资源类、配置 `web.xml` 文件以及使用依赖注入等步骤,演示了在JSF项目中实现RESTful服务的具体过程,为Java开发者提供了实用指南。
31 0
|
2月前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
51 0
|
2月前
|
JavaScript 前端开发 编译器
纯前端如何实现批量dom转图片,并下载成压缩包
【8月更文挑战第22天】纯前端如何实现批量dom转图片,并下载成压缩包
56 0
下一篇
无影云桌面