瀏覽器端JS導出EXCEL

時間 2019-11-20

原文原文鏈接

瀏覽器端JS導出EXCEL

FileSaver.js 實現了在自己不支持 HTML5 W3C saveAs() FileSaver 接口的瀏覽器支持文件保存。FileSaver.js 在客戶端保存文件的解決方案，而且能夠讓 Web 應用完美的生成文件, 或者保存不該該發送到外部服務器的一些敏感信息。是一種簡單易用實現的利用 JavaScript/JS 在瀏覽器端保存文件的方案。javascript

實現瀏覽器端生成並保存文件的 JavaScript 庫 FileSaver.js 使用說明：html

1、引入 JavaScript 文件：html5

[javascript] view plain copy

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

2、例子：java

保存成文本文件git

[javascript] view plain copy

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

保存成圖片

[javascript] view plain copy

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

支持的瀏覽器：

最簡單的完整示例：github

經過使用FileSave.js實現FileSave.js插件https://github.com/eligrey/FileSaver.js/canvas

注意點：瀏覽器

1.FileSaver.js實現瀏覽器寫入文件到本地磁盤，對於不支持Blob的瀏覽器須要使用Blob.js。服務器

2.輸出內容包含中文的話，內容前面加上?來防止中文亂碼。ui

完整（各類文件格式下載）DEMO源代碼下載（包含全部Demo和用到的Js文件）：http://download.csdn.net/detail/pplsunny/9673540

html頁面代碼以下：

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE導出CSV</title>
<script src="FileSaver.js"></script>
<script>
window.onload = function(){
function exportCsv2(){
//Excel打開後中文亂碼添加以下字符串解決
var exportContent = "\uFEFF";
var blob = new Blob([exportContent+"標題,標題,標題\n1,2,3\n4,5,6"],{type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.csv");
}
document.getElementById("J_export").onclick = function(){
exportCsv2();
}
}
</script>
</head>
<body>
<a href="javascript:;" id="J_export">導出</a>
</body>
</html>