js导出表格\csv\zip格式文件

最新推荐文章于 2024-07-27 10:20:15 发布

qq_38785020

最新推荐文章于 2024-07-27 10:20:15 发布

阅读量1.3k

点赞数 1

分类专栏： js 文章标签： js导出 zip csv xls

本文链接：https://blog.csdn.net/qq_38785020/article/details/89639233

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最近工作运用到导出zip文件,把自己运用到的方法在这里记录一下

用js导出zip文件

具体JSZip的运用请参考https://stuk.github.io/jszip/官方文档

<button class="layui-btn layui-btn-sm layui-btn-danger" id="export>导出</button>

<script src="/start/layui/js/jszip.js"></script>
<script src="/start/layui/js/FileSaver.js"></script>
$("#export").click(function(){
		var str = "序号,标题,操作类型,操作内容,操作时间\n"
        let i = 0
        for(var item of data ){
          i++
          str += `${i},${item.option_title},${item.option_type},${item.option_msg},${item.ctime},\n`
        }
        var zip = new JSZip()
        zip.file("操作日志.csv",str)
        zip.generateAsync({type:'blob'}).then(function(content){
          saveAs(content,'test.zip')
        })
})

用js导出csv文件

<button class="layui-btn layui-btn-sm layui-btn-danger" id="export>导出</button>

$("#export").click(function(){
		var str = "序号,标题,操作类型,操作内容,操作时间\n"
        let i = 0
        for(var item of data ){
          i++
          str += `${i},${item.option_title},${item.option_type},${item.option_msg},${item.ctime},\n`
        }
     if (window.navigator.msSaveOrOpenBlob) {
     // 如果是IE11
     	 let data = "\ufeff" + str;
     	 var blob = new Blob([data], { type: "text/csv,charset=UTF-8" });
     	 // 以本地方式保存文件
     	 navigator.msSaveBlob(blob, `测试.csv`);
    }else{
        let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str)
        var link = document.createElement("a")
        link.href = uri;
        link.download = "测试.csv"
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link)
     }
})

用js导出大量数据csv文件

更多blob用法请参考blob官方文档

<button class="layui-btn layui-btn-sm layui-btn-danger" id="export>导出</button>

$("#export").click(function(){
		var str = "序号,标题,操作类型,操作内容,操作时间\n"
        let i = 0
        for(var item of data ){
          i++
          str += `${i},${item.option_title},${item.option_type},${item.option_msg},${item.ctime},\n`
        }
        //text/plain的意思是将文件设置为纯文本的形式，浏览器在获取到这种文件时并不会对其进行处理。
        var blob = new Blob([str], {type: "text/plain;charset=utf-8"});  	
		//中文乱码问题
		blob =  new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});  
		var uri = window.URL.createObjectURL(blob); 
		var link = document.createElement("a");
		link.href = uri;
		link.download =  "测试.csv";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link)
})

用js导出xls表格文件

<button class="layui-btn layui-btn-sm layui-btn-danger" id="export>导出</button>

$("#export").click(function(){
		var str = '<tr><td>序号</td><td>标题</td><td>序号</td><td>操作内容</td><td>操作时间</td></tr>'
        let i = 0
        for(var item of data ){
          i++
          str += `<tr><td>${i}</td>,<td>${item.option_title}</td>,<td>${item.option_type}</td>,<td>${item.option_msg}</td>,<td>${item.ctime}</td></tr>`
        }
      var download= '测试'
      var uri = 'data:application/vnd.ms-excel;base64,';
      var template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
      xmlns:x="urn:schemas-microsoft-com:office:excel" 
      xmlns="http://www.w3.org/TR/REC-html40">
      <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
        <x:Name>${download}</x:Name>
        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
        </head><body><table>${str}</table></body></html>`;
      
	  function base64 (s) { return window.btoa(unescape(encodeURIComponent(s)))}
      window.location.href = uri + base64(template);