美文网首页
浏览器下载文件

浏览器下载文件

作者: 幻之国2012 | 来源:发表于2022-05-20 12:53 被阅读0次

浏览器页面点击【下载】按钮,将对应的文件下载到用户本地

// 1. 安装 file-saver
yarn add file-saver

// 2. 引入 file-saver
import FileSave from 'file-saver'

/** 浏览器下载 文件
  fileUrl:  文件链接地址
  fileName:  自定义文件名
*/
export function downloadFilesInBrowser(fileUrl, fileName = '') {
  const _fileUrl = fileUrl.indexOf('?') !== -1 ? fileUrl.match(/(\S*)\?/)[1] : fileUrl
  const fileType =  _fileUrl.replace(/.+\./, '');
  const _fileName = fileName ? fileName.indexOf(`.${fileType}`) !== -1 ? fileName : `${fileName}.${fileType}` : `${new Date().getTime()}.${fileType}`

  let oReq = new XMLHttpRequest();
  oReq.open('get', fileUrl, true);
  oReq.responseType = 'blob';
  oReq.onload = function () {
    let file = new Blob([oReq.response], {
      type: `application/${fileType}`,
    });
    FileSave.saveAs(file, _fileName);
  };
  oReq.send();
}

相关文章

  • 浏览器下载文件时, 文件名乱码的解决方案

    在用 PHP 写文件下载模块时碰到 Safari 浏览器和 IE 浏览器下载文件时, 文件名出现了乱码问题. 在返...

  • Ubuntu 16.04 安装 Chrome 浏览器

    Ubuntu 安装 Google Chrome 浏览器 下载稳定版 Chrome 浏览器 deb 文件. 下载地址...

  • response学习----实现文件下载

    1)什么情况下会文件下载?浏览器不能解析的就文件下载2)什么情况下需要在服务器上编写文件下载代码?理论上,浏览器可...

  • 文件的上传与下载

    文件的上传下载 依赖: 下载 步骤: 向浏览器输入消息 下载文件要获取下载文件的路径下载文件的名是啥设置想办法让浏...

  • 上传与下载

    1.文件下载2.文件上传 文件下载 访问资源时相应头如果没有设置Content-Disposition,浏览器默认...

  • 浏览器下载文件

    浏览器页面点击【下载】按钮,将对应的文件下载到用户本地

  • React-浏览器调用下载

    当下载链接为浏览器可以识别的文件如图片时,浏览器会直接打开文件不会下载,如何解决这个问题可以调用form表单请求

  • HTTP的header控制浏览器打开或者下载文件

    1、php输出文件时候,浏览器下载该文件 2、PHP输出图片,浏览器中直接打开图片 3、PHP输出pdf,浏览器直...

  • 浏览器下载中文名文件出现乱码,如何解决?

    在《web开发中,如何让浏览器下载文件?》 中介绍了如何让浏览器下载文件的原理,其实非常简单,本质上就是输出一个 ...

  • 全网视频下载

    史上最全的视频下载方案 如何利用谷歌浏览器的开发者工具下载很多个.ts文件? 批量下载ts视频文件在文件夹下,sh...

网友评论

      本文标题:浏览器下载文件

      本文链接:https://www.haomeiwen.com/subject/dohxprtx.html