【记录】js前端，如何将json格式文件转换成yaml，并下载

先上Code，再来细细分析。

1.安装js-yaml module
npm install js-yaml

2.在VUE中引入
const json2yaml = require('js-yaml');

3.将json转化成yaml，并下载

downloadYaml(){
    let yamlStr = json2yaml.dump(this.transYamlFormat(),{lineWidth: -1});//this.transYamlFormat()会返回需要trans的json
    let export_blob = new Blob([yamlStr]);
    let save_link = document.createElement('a');
    save_link.href = window.URL.createObjectURL(export_blob);
    save_link.setAttribute("download", 'config.yaml');
    save_link.click();
    save_link.remove();
}

写在后面的学习与分析

1.npm
1）Node软件包管理器
2）npm 由两个主要部分组成:

用于发布和下载程序包的 CLI（命令行界面）工具
托管 JavaScript 程序包的在线存储库

3）每个 JavaScript 项目（无论是 Node.js 还是浏览器应用程序）都可以被当作 npm 软件包，并且通过 package.json 来描述项目和软件包信息。
4）当运行 npm init 初始化 JavaScript/Node.js 项目时，将生成 package.json文件，文件内的内容(基本元数据)由开发人员提供：

name：JavaScript 项目或库的名称。
version：项目的版本。
description：项目的描述。
license：项目的许可证。
scripts：可以把它当作在项目本地运行的命令行工具

组内项目的的 package.json：

5）dependencies vs devDependencies，这两个以键值对象的形式出现，npm 库的名称为键。这些依赖通过带有 --save 或 --save-dev 标志的 npm install 命令安装。它们分别用于生产和开发/测试环境。

6）确切的软件包版本都将记录在package-lock.json 文件中。package-lock.json 通常是由 npm install 命令生成的。

7）如果要在全局上下文中安装程序包，可以在机器的任何地方使用它，则可以指定全局标志 -g。

8）依赖包的版本

~ 会匹配最近的小版本依赖包，比如 ~1.2.3 会匹配所有 1.2.x 版本，但是不包括 1.3.0
^ 会匹配最新的大版本依赖包，比如 ^1.2.3 会匹配所有 1.x.x 的包，包括 1.3.0，但是不包括 2.0.0
* 安装最新版本的依赖包，比如 *1.2.3 会匹配 x.x.x，

2.nodemon
（我们组项目的scripts里有个nodemon）

nodemon用来监视node.js应用程序中的任何更改并自动重启服务,非常适合用在开发环境中。
nodemon将监视启动目录中的文件，如果有任何文件更改，nodemon将自动重新启动node应用程序。
nodemon不需要对代码或开发方式进行任何更改。 nodemon只是简单的包装你的node应用程序，并监控任何已经改变的文件。nodemon只是node的替换包，只是在运行脚本时将其替换命令行上的node。

3.js中的 JSON 对象
JSON 对象包含两个方法：一是用于解析成 JSON 对象的 parse()；二是用于将对象转换为 JSON 字符串方法的 stringify()
JSON.stringify 方法是将一个 JavaScript 对象或值转换为 JSON 字符串，默认该方法其实有三个参数：
第一个参数是必选，后面两个是可选参数非必选。第一个参数传入的是要转换的对象；
第二个是一个 replacer 函数或者数组，则可选择性地仅处理包含数组指定的属性。序列化传入为对象时，若 replacer 函数返回 undefined 或者函数，则值会被忽略；
第三个参数用来控制结果字符串里面的间距，后面两个参数整体用得比较少。
例如：

4.js中的Blob对象
Blob，Binary Large Object的缩写，代表二进制类型的大对象。在Web中，Blob类型的对象表示不可变的类似文件对象的原始数据，通俗点说，就是Blob对象是二进制数据，但它是类似文件对象的二进制数据，因此可以像操作File对象一样操作Blob对象。

1）创建

var blob1 = new Blob([data1]);
slice方法，创建源Blob对象中制定范围内的数据：var blob2 = blob1.slice(0,3);

2）使用
（1）调用slice方法对大文件进行分片上传
（2）Blob URL

Blob URL可以通过URL.createObjectURL(blob)创建。在绝大部分场景下，我们可以像使用Http协议得URL一样使用Blob URL。常见的场景有：作为文件的下载地址和作为图片资源地址。
每个对象必须通过调用URL.revokeObjectURL()方法来释放。浏览器会在文档退出时自动释放它们。

（3）Data URL

Data URL将图片“嵌入”到HTML中。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，减少了一次向服务器请求外部资源的call。
Data URL在浏览器地址栏输入后是怎样的？通常情况下，可以看到这个url代表的图片。
好处在于：当访问外部资源很麻烦或受限时；当图片是在服务器端用程序动态生成，每个访问用户显示的都不同时；当图片的体积太小，占用一个HTTP会话不是很值得时。
局限在于：Base64编码的数据体积通常是原数据的体积4/3，也就是Data URL形式的图片会比二进制格式的图片体积大1/3；Data URL形式的图片不会被浏览器缓存，这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候。

（4）Blob URL vs Data URL

Blob URL得长度一般比较短
Blob URL只能在当前应用内部使用，例如：img.src = url；把Blob URL复制到浏览器的地址栏中，是无法获取数据的。Data URL相比之下，就有很好的移植性，你可以在任意浏览器使用。

5.window.URL.createObjectURL
创建一个新的对象URL，该对象URL可以代表某一个指定的file对象或者bold对象。
可以用于在浏览器上预览本地的图片或者视频。

【记录】js前端，如何将json格式文件转换成yaml，并下载

你可能感兴趣的:(【记录】js前端，如何将json格式文件转换成yaml，并下载)