前端JS/VUE如何生成Vcard或其他文件--导出任意后缀的文件

本文为享有盛誉之名博主原创文章，未经博主允许不得转载。除非给我打钱，在征求本人同意即可。

本文链接：https://blog.csdn.net/bbs11007/article/details/113976060

有个需求是在前端由用户输入姓名+电话，然后生成一个Vcard，也就是.vcf格式文件,就是导入手机的通讯录中，这个做手机测试的都知道。其实不一定是.vcf格式的文件，其他的格式文件也可以，如.txt等。

首先Vcard格式是什么样的，这个hello.vcf内容：

BEGIN:VCARD
VERSION:3.0
N:张三
FN:张三
TEL;TYPE=CELL:13838380438
END:VCARD

我们把这个内容写入文件就行，看起来很简单。但是要知道，除了IE（它特殊）能支持写文件，其他浏览器都不支持写文件。大家可以百度去看看为什么

但是我们知道excel由插件可以进行读写，就是其他文件就不行。多亏了泡泡鱼这个大神（人很厉害，也热情）给了一个思路，因为我们这个项目不涉及写入数据库，只是一次性的，生成vcard或其他文件即可，所以使用导出的思路，导出时可以更改文件名，特别时度娘有生成xxx.txt的例子。顺着这个思路我找到了FileSaver.js插件，借用这个插件我们就可以生成文件了，只需改下后缀即可！

后面我们只需考虑几个问题，

1.往文件写入内容，换行，空格，符号等内容---这个简单吧，就是js的换行符啊！ \n

2.写完后保存文件名，指定路径等是否需要，还是默认即可；--因为我们的思想时导出文件，相当于下载功能，所以下载的路径时浏览器设置的路径。

其他的就是复制粘贴咯！

FileSaver代码实现逻内容阅读：FileSaver源码阅读_玉案轩窗的博客-CSDN博客_filesaver

简单介绍下FileSaver.js基本用法：

单独下载安装FileSaver.js教学：https://github.com/eligrey/FileSaver.js

插件安装方法来自：FileSaver.js 文件下载 - _Iniesta - 博客园

安装：

npm install file-saver --save

或者(需下载FileSaver.js文件)

<script src="path/FileSaver.js"/>

引用：

import FileSaver from 'file-saver'

下载：

FileSaver.saveAs('要下载的文件流','文件名');

使用方法无非这几步：

1.写内容（字符串、文本、图片、表格），默认是UTF-8

2.导出文件名.后缀

使用方法参考：h5实现下载（二）FileSaver.js 一个生成文件并下载的插件 - 坤嬷嬷 - 博客园

例子：

VUE的写法：

1.先引用（引用方法大同小异）：

//我是直接下载js文件的，没有用npm，习惯问题
import FileSaver from '../../build/js/FileSaver'

有些这么引用(他应该是npm install方式下载的): import { saveAs } from 'file-saver';

也可以在代码中使用require()：var FileSaver = require('file-saver');

2.然后直接写文本内容，几种写法都可以，具体file和Blob的使用区别请看：file-saver&Blob、File前端导出文件 - _花小七 - 博客园

var file = new File(["欢迎访问 享有盛誉之名博客"], "文件导出测试.txt", {type: "text/plain;charset=utf-8"});
saveAs(file);

或者

var file = new File(["欢迎访问 享有盛誉之名博客"], {type: "text/plain;charset=utf-8"});
saveAs(file, "文件导出测试.vcf");

或者

var blob = new Blob(["欢迎访问 享有盛誉之名博客"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "文件导出测试.txt");

JS的写法

1.先引用：

<script src="FileSaver.js" charset="utf-8"></script>

2.写法

//这个是在HTML文件里写的
<script type="text/javascript">
      var blob = new Blob(["欢迎访问 享有盛誉之名博客"], {type: "text/plain;charset=utf-8"});
      saveAs(blob, "文件导出测试.txt");
 </script>

全部看起来是不是更容易理解：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="FileSaver.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      var blob = new Blob(["欢迎访问 享有盛誉之名博客"], {type: "text/plain;charset=utf-8"});
      saveAs(blob, "文件导出测试.txt");
    </script>
  </head>
  <body>
  </body>
</html>

如同上面VUE写法一样，在JS文件里就一模一样了。

最后执行的时候就跟下载文件似的，就在浏览器中下载下来了，如果需要下载到指定位置，看下面。

其他的图片和表格的内容，略！最后展示我生成Vcard格式的写法：

var file = new File([
                      "BEGIN:VCARD"+"\n"  +
                      "VERSION:3.0"+"\n" +
                      "N:"  + "张三"+"\n" + 
                      "FN:" + "张三"+"\n" + 
                      "TEL;TYPE=CELL:" + "13838380438"+"\n"+
                      "END:VCARD"
                     ], {type: "text/plain;charset=utf-8"});
                    
                    FileSaver.saveAs(file, "hello.vcf");

默认下载浏览器的路径：hello.vcf

另外：

除了FileSaver.js插件， 还有StreamSaver.js 插件（下载地址：https://github.com/jimmywarting/StreamSaver.js），但是要去配置https 配合service worker,暂不采用这种做法。