前端使用js读取文件

① 前端js怎么读取页面上传的文件名

1、使用DOM方法获取文件上传输入框的元素。
2、为前端js文件输入元素添加change事件监听。
3、通过event获取文件名，进行前端js后续处理。

② 前端小技巧：加载并解析Markdown文档

移步github

作为程序猿，应该多多少少都用过Markdown，或者至少读过别人用Markdown语法写的一些文档，比如在GitHub有一个你要用的开源程序，而你又是第一回用它，那么你一般会在这个仓库的Readme里读一读开发者提供的工具说明和使用的相关信息，这部分文档一般就是用Markdown的语法写的

简单来说，Markdown就是简化阉割过的HTML，优点是语法简单高效，缺点就是HTML中一些稍微高级复杂一点的效果，比如文本居中，Markdown就无法实现，所以Markdown一般被用来写对页面排版要求不高，以文字为主的笔记和文档

如果你一开始用Markdown写了文档，想要把它放到你的网页上去，并以解析后的形式呈现

那么你有两种实现途径：

第一种方法：

第二种方法：

下面我们对 第二种方法 的实现过程进行详细的说明

上一部分已经提到，我们需要先让原始网页请求服务器中的Markdown文档

这一步需要使用AJAX（中文音译为阿甲克斯），这里先对AJAX作一个简单的科普：

对上面的脚本继续简单的说明：

那么这里有几个问题需要解答：

1. 怎么指定我想要的Markdown文档呢？

表单的显示效果如下：

点击表单中的“显示”按钮后会执行 showMarkdown( ) 函数，即 用AJAX获取Markdown文档 部分的那个函数，并且将表单选择的信息通过 form 变量传递给了 showMarkdown( ) 函数中的 f 变量

这样就通过表单设定了用户指定的Markdown文档

这里采用的是GitHub上的名为 marked 的JS框架，链接： https://github.com/markedjs/marked

要想使用这个框架，需要在html脚本的头信息中引用这个框架：

引用这个框架后就可以使用里面定义的 marked( ) 函数进行Markdown文本解析了

参考资料：

(1) 本人github笔记：AJAX学习笔记

(2) marked说明文档

③ 如何使用Node.js处理前端代码文件的编码问题

使用 NodeJS 编写前端工具时，操作得最多的是文本文件，因此也就涉及到了文件编码的处理问题。我们常用的文本编码有 UTF8 和 GBK 两种，并且 UTF8 文件还可能带有 BOM。在读取不同编码的文本文件时，需要将文件内容转换为 JS 使用的 UTF8 编码字符串后才能正常处理。

1、BOM 的移除
BOM 用于标记一个文本文件使用 Unicode 编码，其本身是一个 Unicode 字符（"uFEFF"），位于文本文件头部。在不同的 Unicode 编码下，BOM 字符对应的二进制字节如下：

3、单字节编码
有时候，我们无法预知需要读取的文件采用哪种编码，因此也就无法指定正确的编码。比如我们要处理的某些 CSS 文件中，有的用 GBK 编码，有的用 UTF8 编码。虽然可以一定程度可以根据文件的字节内容猜测出文本编码，但这里要介绍的是有些局限，但是要简单得多的一种技术。

首先我们知道，如果一个文本文件只包含英文字符，比如 Hello World，那无论用 GBK 编码或是 UTF8 编码读取这个文件都是没问题的。这是因为在这些编码下，ASCII0~128 范围内字符都使用相同的单字节编码。

反过来讲，即使一个文本文件中有中文等字符，如果我们需要处理的字符仅在 ASCII0~128 范围内，比如除了注释和字符串以外的JS代码，我们就可以统一使用单字节编码来读取文件，不用关心文件的实际编码是 GBK 还是 UTF8。

④ JS 下载/导出 csv、excel、txt 、img等文件的方法总结

1. 调用后端接口导出文件

示例下载接口url https://gold-cdn.xitu.io/extension/0.3.9/package.crx

1.1 window.open(url)

会打开一个新窗口，开始下载后会自动关闭新窗口。Safair 下载后没有关闭新窗口。

Chrome、IE、Safair支持，貌似火狐不支持

1.2 window.location=url

在当前窗口下载

Chrome、Safair支持

1.3 iframe

在HTML中，iframe 的属性用src，但在JS中，只有部份浏览器支持修改src(读是没问题)，真正通用的是要修改对应框架的href值。

1.4 <a href="url" download="filename">点击链接下载</a>

HTML5中给a标签增加了一个download属性，只要有这个属性，点击这个链接时浏览器就不在打开链接指向的文件，而是改为下载，目前只有chrome、firefox、opera、Edge支持。常用此方法点击下载图片。

IE既不支持a标签的download属性也不允许js调用a 标签的click方法。

2. 前端直接导出文件到本地

2.1 将数据转成DataURI用<a>标签下载

<a href="DataURI" download="filename">点击链接下载</a>

Data URI Scheme

Data URI Scheme是指可以在Web 页面中包含图片但无需任何额外的HTTP 请求的一类URI。 Data URI Scheme一般用于将经过base64编码的数据嵌入网页中，从而减少请求资源的链接数。IE8 之前的版本都不支持 data URI scheme。

DataURI的格式：

生成DataURI的方式

1. encodeURIComponent

使用这种方式，当数据过多时，URI长度容易超出浏览器限制。 encodeURIComponent常用来转码接口参数，为了避免服务器收到不可预知的请求，对任何用户输入的作为URI部分的内容都需要用encodeURIComponent进行转义。

2. URL.createObjectURL

URL.createObjectURL的参数是File对象或者Blob对象

IE10以下不支持URL.createObjectURL

2.2 windows.navigator.msSaveBlob IE10~Edge 专用

msSaveBlob 是IE10~Edge 私有方法。

2.3 execCommand

有的资料有提到IE9可以使用execCommand方法来保存数据到本地文件，但是我自己没有验证过，不知道是否可行。而且MDN文档中execCommand没有查到SaveAs命令。这块只是做个小记录。

js数据直接导出/下载数据到本地到方法总结

本文转载自：https://juejin.im/post/5cd00253518825418f6f2a8c?utm_source=gold_browser_extension