2015年8月14日 星期五

用filesaver.js 輕鬆將html table的資料匯出成Excel

過去有關Excel的匯出我都是用NPOI套件來撰寫,之前也有寫過類似的文章:

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(23) – NPOI匯出功能

但看到同事有使用filesaver.js這個套件來做匯出,個人覺得蠻方便的,就來分享一下

唯一有個限制,因為是用Html5的Blob來實現的,所以較舊的瀏覽器不支援

而有些版本只要再加載Blob.js也可正常運作

c85eee520a2e43589c3188a35b6ed0da

資訊來自 filesaver.js Github

官網已經有Demo示範匯出 png . txt . xhtml 的類型,以下就來實作實務上很常見的匯出table raw data

首頁Github整個clone下來會發現filesaver.min.js這個檔案,將這個檔案載入到你的網頁

e7a4119874a646ff9c98b135453ca671

接著我們寫個html假資料,並加個匯出按鈕,當然實際上你的資料來源可能是後端提供而來

ed9c7e3d3ce34582b205dcdc3784598e

22927ec38a9544ea871d38fcf1ce6978

接著我們用jQuery button click的時候,將tbData這個div底下的資料匯出

$(function () {
$('Button').click(function () {
var blob = new Blob([document.getElementById('tbData').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
var strFile = "Report.xls";
saveAs(blob, strFile);
return false;
});
});

這樣就可以很方便的匯出資料了!


780e1092f82642c59ffae31dead7beb5


Technorati 的標籤: ,,,

2015年8月13日 星期四

Visual Studio 2015 的localDB

好久沒更新部落格…近半年已無時間跟體力在文章上,但依然遇到一些問題還是有做一些未經整理的筆記,有時間再一一補上來分享….

今年依然是個技術大爆發的一年,前陣子將開發環境重新安裝成 Win 10 + Visual Studio 2015後,原本在2013 Run的專案,SQL Server是用本機的localDB,但用VS 2015開已經連不上,至於什麼是localDB呢?可以看看保哥這篇文章:

再以往使用localdb你的連線字串可能看起來會是這樣:

<add name="ConnectionString" connectionString="Data Source=(localdb)\v11.0;Initial Catalog=DataBaseName;Persist Security Info=True;MultipleActiveResultSets=True;Application Name=EntityFramework" providerName="System.Data.SqlClient" />


再VS 2015 開始有了新的命名方式,必須改用 (localdb)\MSSQLLocalDB 來取代

<add name="ConnectionString" connectionString="Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=DataBaseName;Persist Security Info=True;MultipleActiveResultSets=True;Application Name=EntityFramework" providerName="System.Data.SqlClient" />


當然,如果還是要用舊的執行個體,也可以下載安裝:


https://msdn.microsoft.com/zh-tw/sqlserver2014express.aspx


--


一點小筆記...