博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
浏览器端JS导出EXCEL
阅读量:6404 次
发布时间:2019-06-23

本文共 1419 字,大约阅读时间需要 4 分钟。

浏览器端JS导出EXCEL

 

       FileSaver.js 实现了在本身不支持  W3C saveAs() FileSaver 接口的浏览器支持文件保存。FileSaver.js 在客户端保存文件的解决方案,并且可以让 Web 应用完美的生成文件, 或者保存不应该发送到外部服务器的一些敏感信息。是一种简单易用实现的利用 /JS 在浏览器端保存文件的方案。

实现浏览器端生成并保存文件的 JavaScript 库 FileSaver.js 使用说明:

一、引入 JavaScript 文件:

 

[javascript]   
 
 
  1. <script src="path/FileSaver.js"/>  

 

二、例子:

保存成文本文件

[javascript]   
 
 
  1. var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});  
  2. saveAs(blob, "hello world.txt");  

 

保存成图片

 

[javascript]   
 
 
  1. var canvas = document.getElementById("my-canvas"), ctx = canvas.getContext("2d");// draw to canvas...canvas.toBlob(function(blob) {  
  2.     saveAs(blob, "pretty image.png");  
  3. });  

 

支持的浏览器:

 

最简单的完整示例:

通过使用FileSave.js实现FileSave.js插件https://github.com/eligrey/FileSaver.js/

注意点:

1.FileSaver.js实现浏览器写入文件到本地磁盘,对于不支持Blob的浏览器需要使用Blob.js。

2.输出内容包含中文的话,内容前面加上?来防止中文乱码。

完整(各种文件格式下载)DEMO源代码下载(包含所有Demo和用到的Js文件):

html页面代码如下:

 

[html]   
 
 
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5. <title>IE导出CSV</title>  
    6. <script src="FileSaver.js"></script>  
    7. <script>  
    8. window.onload = function(){  
    9.     function exportCsv2(){  
    10.         //Excel打开后中文乱码添加如下字符串解决  
    11.         var exportContent = "\uFEFF";  
    12.         var blob = new Blob([exportContent+"标题,标题,标题\n1,2,3\n4,5,6"],{type: "text/plain;charset=utf-8"});  
    13.         saveAs(blob, "hello world.csv");  
    14.     }  
    15.     document.getElementById("J_export").onclick = function(){  
    16.         exportCsv2();  
    17.     }  
    18. }  
    19. </script>  
    20. </head>  
    21. <body>  
    22.     <href="javascript:;" id="J_export">导出</a>  
    23. </body>  
    24. </html>  
你可能感兴趣的文章
Eclipse+Web3j开发以太坊应用
查看>>
[文摘]struts2:关于EL能够获得action的属性
查看>>
React 使用 linkState 组件
查看>>
SDN、NV在云数据中心的应用场景
查看>>
LOAD DATA INFILE
查看>>
QListWidget中右键单击Item出现菜单
查看>>
国内跨云端平台应用的大数据平台供应商,基于Hadoop的互联网大数据平台解决方案,武汉数道云...
查看>>
Solr查询详解
查看>>
java架构师高手必备的十种能力,全部掌握轻轻松松月入5万+
查看>>
小内存使用Docker部署多个应用实录
查看>>
shell习题-清理日志
查看>>
OpenGL OPenVG Freetype
查看>>
liunx定时执行php脚本
查看>>
OSPF MPLS动态流量工程和BGP4
查看>>
如何 Scale Up/Down 应用?- 每天5分钟玩转 Docker 容器技术(126)
查看>>
ubuntu下安装最新版的nodejs方法
查看>>
位运算操作
查看>>
如何在戴尔M系列交换机上配置简单交换模式
查看>>
日常工作小结(十)
查看>>
python核心编程--第九章
查看>>