使用JS 的download库在浏览器直接下载文件

目录
  • download.js
  • 使用说明
  • 用法示例
    • 文本
    • HTML
    • 二进制文件

一般情况下web项目的浏览器下载文件,都是使用form表单或者ajax向后端提交数据,发送请求,后端文件的URL地址或者二进制文件流。这篇文章主要介绍了使用JS 的download库在浏览器直接下载文件。

HTML5 a 标签可以使用 download 属性来设置资源的下载,但需要是同源,如果浏览器可以解析也会直接打开。

这时我们可以通过第三方库 download 来实现更完整的下载功能。

download.js

download.js 获取来源:

  • Github 地址:https://github.com/rndme/download
  • 本站下载地址:https://static.runoob.com/download/download-master.zip
  • CDN 库:https://cdn.staticfile.org/downloadjs/1.4.8/download.min.js
  • NPM 安装:npm install downloadjs

使用说明

download.js 库提供了 download() 函数用于下载文件。下载内容可以是 URL、字符串、Blob 或类型化的数据数组,或者通过将文件数据表示为 base64 或 url 编码字符串的 dataURL。

无论输入格式如何,download() 都使用指定的文件名和 mime 信息以与使用 Content-Disposition HTTP 标头的服务器相同的方式保存文件。

download(data, strFileName, strMimeType);
  • data - 下载的数据内容,可以是 Blob、File、String 或 dataURL。
  • strFileName - 要创建的文件的名称。
  • strMimeType - 要下载的文件的 MIME 内容类型。

用法示例

文本

将字符串存储到 dlText.txt 文件中并下载:

download("hello world", "dlText.txt", "text/plain");

dataURL 文本实例:

download("data:text/plain,hello%20world", "dlDataUrlText.txt", "text/plain");

blob 文本实例:

download(new Blob(["hello world"]), "dlTextBlob.txt", "text/plain");

url 实例:

download("/robots.txt");

UInt8 文本数组实例:

var str= "hello world",    arr= new Uint8Array(str.length);
str.split("").forEach(function(a,b){
  arr[b]=a.charCodeAt();
});

download( arr, "textUInt8Array.txt", "text/plain" );

HTML

html 字符串实例:

download(document.documentElement.outerHTML, "dlHTML.html", "text/html");

html Blob 实例:

download(new Blob(["hello world".bold()]), "dlHtmlBlob.html", "text/html");

ajax 回调实例:

$.ajax({
        url: "/download.html",
        success: download.bind(true, "text/html", "dlAjaxCallback.html")
});

二进制文件

图片 URL:

download("/diff6.png");

异步下载图片:

var x=new XMLHttpRequest();
x.open( "GET", "/diff6.png" , true);
x.responseType="blob";
x.onload= function(e){download(e.target.response, "awesomesauce.png", "image/png");};
x.send();

到此这篇关于使用JS 的download库在浏览器直接下载文件的文章就介绍到这了,更多相关download.js下载文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JS端基于download.js实现图片、视频时直接下载而不是打开预览

    项目中的附件列表,通常情况都需要提供下载.删除的功能,功能本身没有什么要说的,都是基本功能,使用浏览器的的下载功能,也都是用window.open(url),或者window.location.href=url的方式,url即为附件下载接口,浏览器自动解析,如果是图片.视频.txt等格式的会直接预览文件,而不是像docx.xlsx一样直接下载,项目中为了功能明确,将预览单独加了一个查看按钮,下载按钮要实现无论什么文件格式都直接下载. 有两种方式处理: 一.后台接口层面处理:(比较常见) 响应头中

  • 使用JS 的download库在浏览器直接下载文件

    目录 download.js 使用说明 用法示例 文本 HTML 二进制文件 一般情况下web项目的浏览器下载文件,都是使用form表单或者ajax向后端提交数据,发送请求,后端文件的URL地址或者二进制文件流.这篇文章主要介绍了使用JS 的download库在浏览器直接下载文件. HTML5 a 标签可以使用 download 属性来设置资源的下载,但需要是同源,如果浏览器可以解析也会直接打开. 这时我们可以通过第三方库 download 来实现更完整的下载功能. download.js do

  • Node.js实现下载文件的两种实用方式

    目录 第一种方式:使用原生的http模块 第二种方式:使用Express+Axios下载文件 总结 设置响应头 返回数据流 第一种方式:使用原生的http模块 我们仅需要用到fs和http两个node.js的原生模块,不需要安装第三方模块,就可以实现文件的下载.代码如下: var fs = require('fs'); var http = require("http"); var server = http.createServer(); server.on("reques

  • 用JS在浏览器中创建下载文件

    但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开->另存为.如下面这个链接: 复制代码 代码如下: <a href="file.js">file.js</a> 用户点击这个链接的时候,浏览器会打开并显示链接指向的文件内容,显然,这并没有实现我们的需求.HTML5中给a标签增加了一个download属性,只要有这个属性,点击这个链接时浏览器就不在打开链接指向的文件,而是改为下载(目前只有chrome.firefox和opera支持). 下载时会

  • js基于FileSaver.js 浏览器导出Excel文件的示例

    本文介绍了js基于FileSaver.js 浏览器导出Excel文件,分享给大家,也给自己做个笔记 限制一:不同浏览器对 blob 对象有不同的限制 具体看看下面这个表格(出自FileSaver.js): Browser Constructs as Filenames Max Blob Size Dependencies Firefox 20+ Blob Yes 800 MiB None Firefox < 20 data: URI No n/a Blob.js Chrome Blob Yes

  • vue网络请求方案原生网络请求和js网络请求库

    一. 原生网络请求 1. XMLHttpRequest(w3c标准)    // 没有promise时的产物 当时的万物皆回调,太麻烦 2. Fetch    // html5提供的对象,基于promise 因为promise的存在,为了简化网络请求. 使用 Fetch - Web API 接口参考 | MDN Fetch是新的ajax解决方案 Fetch会返回Promise对象.fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象. 参数: 1.第一个参数

  • js停止冒泡和阻止浏览器默认行为的简单方法

    停止冒泡通用方法: function stopBubble(e) { //如果提供了事件对象,是非IE浏览器 if ( e && e.stopPropagation ) //使用W3C的stopPropagation()方法 e.stopPropagation(); else //使用IE的cancelBubble = true来取消事件冒泡 window.event.cancelBubble = true; } 阻止浏览器默认行为-通用方法 //阻止浏览器的默认行为 function s

  • JS判断是否在微信浏览器打开的简单实例(推荐)

    最近做很多HTML5的项目,很多页面会通过微信微博等SNS分享出去.在分享页面上提供公司APP的下载.但是在很多应用的浏览器中,点击下载链接无法下载应用.那么针对这些浏览器我们需要给用户提示从safari或者系统自带的浏览器打开分享页面.通过js就可以判断当前页面是在什么浏览器打开的. 以下是一段示例代码,注释中表明了通过JS如何判断是否在微信浏览器打开,是否在QQ空间浏览器,是否在新浪微博打开.当然可以做得更完善一点,再加上判断是在移动设备打开还是在PC端浏览器打开的,更加细分一点,可以判断是

  • js禁止Backspace键使浏览器后退的实现方法

    在项目中遇到按下Backspace键让浏览器后退的问题,上网搜了几种解决方案都不太理想.于是集众人之智,采众家之长,归纳如下: 1.在公用js中定义阻止Backspace的方法 function banBackSpace(e){ var ev = e || window.event; //各种浏览器下获取事件对象 var obj = ev.relatedTarget || ev.srcElement || ev.target ||ev.currentTarget; //按下Backspace键

  • JS获取鼠标位置距浏览器窗口距离的方法示例

    本文实例讲述了JS获取鼠标位置距浏览器窗口距离的方法.分享给大家供大家参考,具体如下: 先来看看运行效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #test_div { width:400px; height: 400px;

随机推荐