js实现txt/excel文件下载

roundstones 发布于2019-08-05 14:10 / 2402人阅读

摘要：出于安全考虑，无法直接调用写文件到磁盘，但是却可以通过下载来变相实现保存功能。生成文件并下载是一种逗号分隔的表格文件格式，可以很好的被支持，由于其文件格式简单，所以经常用在简单的表格上面。

出于安全考虑，JS无法直接调用FileAPI写文件到磁盘，但是却可以通过下载来变相实现保存功能。
JS要实现下载功能，一般都是这么几个过程：生成下载的URL，动态创建一个A标签，并将其href指向生成的URL，然后触发A标签的单击事件，这样就会弹出下载对话框，从而实现了一个下载的功能。

HTML5的download属性

这个属性很重要，它可以指定下载文件名，并且可以告诉浏览器目标链接是一个下载链接，不是一个普通链接，我们看下面代码就能看出区别了：

下载1
下载2

可以发现，下载1按钮能够实现下载，点击下载2链接时直接在浏览器打开文件内容了。

JS生成CSV文件并下载

csv是一种逗号分隔的表格文件格式，可以很好的被Excel支持，由于其文件格式简单，所以经常用在简单的表格上面。最重要的是它是一种纯文本格式，可以很轻松地用JS来生成而不借助第三方库。

不考虑兼容性的保存CSV方法：

/**
 * 保存CSV文件
 * @params csv csv文件内容
 * @params saveName 保存的文件名
 */
function saveCSV(csv, saveName){
 var a = document.createElement("a");
 a.href = "data:text/csv;charset=utf-8,ufeff" + encodeURIComponent(csv);
 a.download = saveName;
 a.click();
}

虽然我们用的是UTF-8编码，下载后你会发现，用文本编辑器打开没问题，但是用Excel打开乱码：
原因就是少了一个ufeffBOM头，所以在data里面添加一个ufeff解决了

文字换行问题

文字换csv的最大问题就是如何处理换行，很简单，使用`
`,`
`后再用encodeURIComponent编码一下就可以了。

大部分浏览器可能都没啥问题，但是一些比较老的Chrome可能下载的时候指定的download就是不生效，此时可以用blob来解决：（测试此方法测试在微软Edge浏览器和IE11下都无法下载）

考虑兼容性的保存CSV方法：

/**
 * 保存CSV文件
 * @params csv csv文件内容
 * @params saveName 保存的文件名
 */
function saveCSV(csv, saveName)
{
 var blob = new Blob(["ufeff" + csv], {type: "text/csv,charset=UTF-8"});
 openDownloadDialog(blob, saveName)；
}

此方法测试在微软Edge浏览器可以实现下载，但是在IE11下还是无法下载

封装下载函数

const openDownloadDialog = (url, saveName) => {
  if (typeof url === "object" && url instanceof Blob) {
    url = URL.createObjectURL(url); // 创建blob地址
  }
  const aLink = document.createElement("a");
  aLink.href = url;
  aLink.download = saveName;
  aLink.click();
};

txt文件

下载text文件只需要修改一下文件类型就行了

function saveTXT(csv, saveName)
{
 var blob = new Blob(["ufeff" + csv], {type: "text/txt,charset=UTF-8"});
 openDownloadDialog(blob, saveName)；
}

注意事项

保存文件的文件名后缀会影响打开方式，如果是.csv的文件名，默认打开为excel，.txt文件结尾的默认打开方式为text文件。所以这点需要注意

参考代码

我自己在项目中的封装

downLoadTools.js

const openDownloadDialog = (url, saveName) => {
  if (typeof url === "object" && url instanceof Blob) {
    url = URL.createObjectURL(url); // 创建blob地址
  }
  const aLink = document.createElement("a");
  aLink.href = url;
  aLink.download = saveName;
  aLink.click();
};
export default {
  /**
   * 保存CSV文件
   * @params csv csv文件内容
   * @params saveName 保存的文件名
   */
  saveCSV: (csv, saveName) => {
    const blob = new Blob(["ufeff" + csv], {type: "text/csv,charset=UTF-8"});
    openDownloadDialog(blob, `${saveName}.csv`);
  },
  saveTXT: (csv, saveName) => {
    // const href = "data:text/txt;charset=utf-8,ufeff" + encodeURIComponent(csv); // ie浏览器不支持
    const blob = new Blob(["ufeff" + csv], {type: "text/tet,charset=UTF-8"});
    openDownloadDialog(blob, `${saveName}.txt`);
  }
};

页面引用

import downLoadTools from "@/utils/downLoadTools";  // 引入

downLoadTools.saveTXT(csv, "文件名");               // csv是一个字符串， 最终会下载一个 文件名.txt 的文件

云服务器服务器托管 js实现视频下载 js实现文件上传到阿里云服务器 html实现下载文件 js 实现画布

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/57837.html

js实现txt/excel文件下载

摘要：出于安全考虑，无法直接调用写文件到磁盘，但是却可以通过下载来变相实现保存功能。生成文件并下载是一种逗号分隔的表格文件格式，可以很好的被支持，由于其文件格式简单，所以经常用在简单的表格上面。出于安全考虑，JS无法直接调用FileAPI写文件到磁盘，但是却可以通过下载来变相实现保存功能。JS要实现下载功能，一般都是这么几个过程：生成下载的URL，动态创建一个A标签，并将其href指向生成...

娣辩孩 2019-08-22 18:02 评论0 收藏0
python大佬的养成计划----os,datetime,time模块补充

摘要：是否则检验指定的对象是否存在。由于的模块实现主要调用库，所以各个平台可能有所不同。时间格式时间戳的方式通常来说，时间戳是指格林威治时间年月日时分秒北京时间年月日时分秒起至现在的总秒数。元组方式元组共有个元素，返回的函数主要有，，。 os模块 os模块提供了多数操作系统的功能接口函数。当os模块被导入后，它会自适应于不同的操作系统平台，根据不同的平台进行相应的操作，在python编程时，...

frank_fun 2019-07-30 17:46 评论0 收藏0
一款Android图文识别与扫描软件

OCR图文识别App 是一款准确高效的 OCR文字识别与扫描软件，识别准确度高，速度快，扫描文件清晰，可导出TXT、Excel。免费使用。技术基于百度在业界领先的人工智能与深度学习技术，提供对身份证、银行卡、营业执照等常用卡片及证照的文字内容进行结构化识别的服务。功能身份证识别银行卡识别文字识别驾驶证识别行驶证识别车票识别发票识别营业执照识别应用场景身份认证：结合...

wapeyang 2019-04-23 15:08 评论0 收藏0
MySQL学习从这里出发！

摘要：聚合函数将一列数据作为一个整体，进行纵向的计算。计算个数一般选择非空的列主键计算最大值计算最小值计算和计算平均值注意聚合函数的计算，排除值。 MySQL数据库开发学习中，想满足一些需求，无疑需要经常与数据打交道，例如，我们在使用IO的一些技术的时候，常常需要将一些数据存储到外部文件，可能大家会问，我们初学的时候常常会简单的保存一些数据到 .txt 文件中，为什么还需要数据库呢？ (一...

adam1q84 2019-08-19 10:12 评论0 收藏0
MySQL学习从这里出发！

摘要：聚合函数将一列数据作为一个整体，进行纵向的计算。计算个数一般选择非空的列主键计算最大值计算最小值计算和计算平均值注意聚合函数的计算，排除值。 MySQL数据库开发学习中，想满足一些需求，无疑需要经常与数据打交道，例如，我们在使用IO的一些技术的时候，常常需要将一些数据存储到外部文件，可能大家会问，我们初学的时候常常会简单的保存一些数据到 .txt 文件中，为什么还需要数据库呢？ (一...

mcterry 2019-08-01 14:07 评论0 收藏0