JavaScript实现文件下载并重命名代码实例

这篇文章主要介绍了JavaScript实现文件下载并重命名代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

第一种是HTML官网中的方法

<a href="/images/liang.jpg" rel="external nofollow" download="文件名称">

HTML5 中 a 标签提供了一个 filename 属性，可以下载成指定的 download 属性名称

这种同源访问是没有问题的，但一跨域就不行了，试了其它方法，不是报跨域错误，就是在当前页面打开文件，体验相当不好。

第二种方案比较通用

/**
 * 获取 blob
 * url 目标文件地址
 */
function getBlob(url) {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest();

    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      }
    };

    xhr.send();
  });
}

/**
 * 保存 blob
 * filename 想要保存的文件名称
 */
function saveAs(blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename);
  } else {
    const link = document.createElement('a');
    const body = document.querySelector('body');
　　　
    link.href = window.URL.createObjectURL(blob);
    link.download = filename;

    // fix Firefox
    link.style.display = 'none';
    body.appendChild(link);

    link.click();
    body.removeChild(link);

    window.URL.revokeObjectURL(link.href);
  }
}

/**
 * 下载
 * @param {String} url 目标文件地址
 * @param {String} filename 想要保存的文件名称
 */
function download(url, filename) {
  getBlob(url).then(blob => {
    saveAs(blob, filename);
  });
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 通过JavaScript下载文件到本地的方法（单文件）

    最近在做一个文件下载的功能,这里把做的过程中用的技术和坑简要总结下. 1. 单文件下载(a标签) 同源单文件 针对单文件的情况下,同源的文件,可以通过 < a> 标签的 download 属性下载文件 const elt = document.createElement('a'); elt.setAttribute('href', url); elt.setAttribute('download', 'file.png'); elt.style.display = 'none'; docume

  • Jsp+Servlet实现文件上传下载 文件上传（一）

    Jsp+Servlet实现文件上传下载 文件上传（一）

    文件上传和下载功能是Java Web必备技能,很实用. 本文使用的是Apache下的著名的文件上传组件 org.apache.commons.fileupload 实现 下面结合最近看到的一些资料以及自己的尝试,先写第一篇文件上传.后续会逐步实现下载,展示文件列表,上传信息持久化等. 废话少说,直接上代码 第一步,引用jar包,设置上传目录 commons-fileupload-1.3.1.jar commons-io-2.4.jar 上传目录:WEB-INF/tempFiles和WEB-INF

  • vue实现在线预览pdf文件和下载（pdf.js）

    vue实现在线预览pdf文件和下载（pdf.js）

    最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上.谷歌.安卓,苹果) 强烈推荐改插件,以下介绍用法 (1)下载插件 下载路径: pdf.js (2)将下载构建后的插件放到文件中public(vue/cli 3.0) (3)在vue文件中直接使用,贴上完整代码 <template> <div class="wrap"> <iframe :src=

  • jsp文件下载功能实现代码

    本文实例为大家分享了jsp实现文件下载功能的3种方法,供大家参考,具体内容如下 第一种.采用转发的方式: package cn.jbit.download.servlet; import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.serv

  • js使用文件流下载csv文件的实现方法

    理解Blob对象 在Blob对象出现之前,在javascript中一直没有比较好的方式处理二进制文件,自从有了Blob了,我们就可以使用它操作二进制数据了. 现在我们开始来理解下Bolb对象及它的文件流下载应用场景,话不多说了,来一起看看详细的介绍吧 1. 创建Blob对象方式如下: var blob = new Blob(dataArray, options); dataArray: 它是一个数组,它包含了要添加到Blob对象中的数据.数组可以是二进制对象或者字符串. options是可选的对

  • Node.js 使用request模块下载文件的实例

    前言 Node.js是JavaScript的一个解析器,可以运行js文件,今天就是简单说一下如何使用Node.js下的request模块下载文件. 1.request 模块下载 npm install request 首先建一个文件夹,在控制台进入该文件夹执行这个命令之后就会在当前文件夹下载request模块了 2.代码编写 var request = require('request'); var fs = require('fs'); /* * url 网络文件地址 * filename 文

  • 使用 JavaScript 创建并下载文件(模拟点击)

    先上代码 /** * 创建并下载文件 * @param {String} fileName 文件名 * @param {String} content 文件内容 */ function createAndDownloadFile(fileName, content) { var aTag = document.createElement('a'); var blob = new Blob([content]); aTag.download = fileName; aTag.href = URL.

  • JSP servlet实现文件上传下载和删除

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 由于存储空间,对一般用户而言,就是用来操作存储文件的,所以这两天,特意看了一下windows下用servlet实现文件上传.下载和删除,下面是详细代码说明 上传: 用的是commons-fileupload-1.2.2.jar和commons-io-2.0.1.jar组件,可以去apache官网上去下载,然后放到WebRoot/WEB-INF/lib目录下 upload.html <html> <hea

  • JS实现百度网盘任意文件强制下载功能

    代码: //get file list data var data=require("system-core:context/context.js").instanceForSystem.getList().listView.listsData; //calculate sign function base64Encode(r){var t,e,a,c,n,o,h="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz012

  • JavaScript实现文件下载并重命名代码实例

    这篇文章主要介绍了JavaScript实现文件下载并重命名代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 第一种是HTML官网中的方法 <a href="/images/liang.jpg" rel="external nofollow" download="文件名称"> HTML5 中 a 标签提供了一个 filename 属性,可以下载成指定的 download 属性名称

  • JavaScript删除指定子元素代码实例

    原生javascript删除指定子元素代码实例: 本章节介绍一下如何利用原生javascript实现删除指定子元素. 大家都知道使用jquery实现此功能更为方便,不过使用原生的javascript也不麻烦,下面做一下介绍. 关于jquery如何实现此功能可以参阅jquery删除指定子元素代码实例一章节. 代码实例: 复制代码 代码如下: <!DOCTYPE HTML> <html> <meta charset="utf-8"> <title&

  • JavaScript多种滤镜算法实现代码实例

    这篇文章主要介绍了JavaScript多种滤镜算法实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.灰色滤镜 设定R,G,B值相等 function makeGray(img){ for(var pixel of img.values()){ var avg = (pixel.getRed()+pixel.getGreen()+pixel.getBlue())/3; pixel.setRed(avg); pixel.setGree

  • JavaScript监听触摸事件代码实例

    这篇文章主要介绍了JavaScript监听触摸事件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 监听 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, use

  • JavaScript遍历数组的方法代码实例

    这篇文章主要介绍了JavaScript遍历数组的方法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 for循环 let arr=["A","B","C","D","E","F"]; for(let i=0;i<arr.length;i++){ console.log(arr[i]); } for...of 遍历出数组中的每

  • Javascript操作select控件代码实例

    这篇文章主要介绍了Javascript操作select控件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 新增.修改.删除.选中.清空.判断存在等 1.判断select选项中 是否存在Value="paraValue"的Item function jsselectisexititem(objselect,objitemvalue) { var isexit = false; for(var i=0;i<objselect

  • 基于javascript实现获取最短路径算法代码实例

    这篇文章主要介绍了基于javascript实现获取最短路径算法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 //A算法 自动寻路 路径 class GetAutoPath{ constructor(id, map, sPos, ePos, mapArr){ //this.type = id.type; this.id = id; this.map = map; this.sPos = sPos; this.ePos = eP

  • JavaScript获取图片真实大小代码实例

    网页页面上的图片尺寸似乎都千篇一律.我们最常见到的带有多图的文章页面中,图的大小通常是和页面的宽度一致,这样看起来,页面就是一个直筒形,这样的布局看多了就会觉得很单调.之所以形成这样的局面,我想很大程度上是因为老式浏览器的限制.但随着现代浏览器(火狐/谷歌/IE11)的普及,浏览器对页面设计的限制越来越少,Web程序员的想象能力能够得到极大的发挥. 比如,冷知识:你知道每个视窗都有的 [x] 是怎么来的吗?这篇文章中,很多图片超出了文本宽度的限制,给人一种参差错落的感觉,同时,让大图片以其真实的

  • javascript的惯性运动实现代码实例

    javascript的惯性运动实现代码实例

    移动端的惯性运动,最早来自 ios 的专利.用于手指滑动,离开屏幕之后,屏幕内容继续滚动.更有动态感. 这里,以 pc 端,鼠标横向(沿x轴) 拖拽的,惯性计算.移动端同理 效果 代码如下 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt

  • 基于JavaScript实现猜数字游戏代码实例

    环境 vscode 1.46 Microsoft Edge 83 示例 以下内容为了解和熟悉 JavaScript,不需要理解,能够复制粘贴并正确运行即可. 新建网页模板 在 vscode 中新建一个 index.html 文件,然后输入以下内容. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>猜数字游戏</title> <style&

随机推荐