首页 > 其他分享 >JS关于导出文件流方法封装的使用

JS关于导出文件流方法封装的使用

时间:2023-03-09 14:33:54浏览次数:38  
标签:文件 const 导出 fileName link 封装 JS data

如果需要频繁地在JavaScript中导出文件流,可以将上述的方法封装为函数,以便在不同的代码中调用。

/**
 * 导出文件
 * @param {string|Uint8Array} data - 文件内容
 * @param {string} fileName - 文件名称
 * @param {string} type - MIME类型,例如:'text/plain'、'application/octet-stream'
 */
function downloadFile(data, fileName, type) {
  const blob = new Blob([data], { type });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

使用时只需要调用该函数,并传入相应的参数即可。

例如导出一个JSON文件:

const data = { name: 'foo', age: 20 };
const fileName = 'example.json';
downloadFile(JSON.stringify(data), fileName, 'application/json');

又例如导出一个PDF文件:

const data = getPDFData(); // 获取PDF文件内容
const fileName = 'example.pdf';
downloadFile(data, fileName, 'application/pdf');

通过封装函数来导出文件流可以简化代码,提高复用性。

标签:文件,const,导出,fileName,link,封装,JS,data
From: https://www.cnblogs.com/wuxu-dl/p/17198282.html

相关文章

  • JAVA 实现导入导出Excel-03随笔
    还是摸鱼的一天疯狂星期四的舆论越来越少了,于我而言:KFC并没有特别价值值得众人去推崇和关注的地方到公司打完卡之后,"偷偷"跑下楼吃了一份早餐,又"偷偷"的做在工位上,看见......
  • 即时通讯系统 -- V0.4 用户业务封装 +  在线用户查询 + 修改用户名 + 超时强踢功能 +
    可以把用户的上线,下线,处理业务放到user.go中,但是好像会有传递依赖的问题,作为初学者就忽略了。。。其余功能只需稍微添加代码,难度较低packagemainimport( "net" "......
  • GNVM - Node.js 多版本管理器
    gnvm地址GNVM-Node.js多版本管理器GNVM是一个简单的Windows下Node.js多版本管理器,类似的nvmnvmwnodist。c:\>gnvminstalllatest1.0.0-x861.0.0......
  • PDFJS 跨域
      https://cloud.tencent.com/developer/article/1531860?from=15425&areaSource=102001.1&traceId=B4KzYkzcjSz31MUNIH68v          ......
  • js Curry 函数科里化
      https://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=2651501763&idx=1&sn=cfe7920ad3a966ef995049cff6bfa1fa&chksm=80f1bd0bb786341dd00ccd2baedaafedbc5cdecc......
  • Windows 安装 Node.js 版本控制器 nvm
    参考文档:https://blog.csdn.net/MJOY791270505/article/details/126400205nvm的安装和使用(详细)_nvm安装_深沉影子灰的博客-CSDN博客1.nvm是什么?node.jsversionman......
  • 谈谈JS中的this
    一、在js非严格模式、非箭头函数下,不看函数在哪里定义,不看是怎么定义,只看函数的调用方式即想知道this指向,就要看this哪个函数,这个函数是怎么调用的 普通调用调用方......
  • js去重
    1.使用ES6的Set去重//Set是ES6中新增的数据类型,它可以帮助我们快速去重。将数组转化为Set之后,再转化回数组即可。```javascriptconstarr=[1,2,3,1,2,3];co......
  • utils&js - 判断数据类型
    utils&js-判断数据类型/***判断文件**如果你需要类型判断,请不要再使用Object.prototype.toString.call()方法*直接调用我们下方封装好的is函数即可*我......
  • js文字转语音
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content......