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

有个需求是在前端由用户输入姓名+电话，然后生成一个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代码实现逻内容阅读：https://blog.csdn.net/s1879046/article/details/81224783

 

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

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

插件安装方法来自：https://www.cnblogs.com/xinchenhui/p/9942399.html

安装：

npm install file-saver --save

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

 
  
2.写法
 
  
//这个是在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,暂不采用这种做法。