Gridview控件導出Excel之后圖片無法顯示


在企業內網,以前有開發一套軟件,今有一位新同事來操作時,他發現在軟件中有一個功能覺得很不滿意,是GridView控件有顯示一些圖片,在導出至Excel之后,圖片無法顯示。其實問題不是他發現的,舊同事早就都知道,但是一直沒有人反映。

嗯,問題反映上來了,就得想辦法去解決了......

呵呵,解決了。現分享於Insus.NET的博客上,不能直接使用軟件功能內容,下面所有實現內容只是模擬。
好的,你需要准備數據,數據源可來自文件,數據庫,Access等。而Insus.NET所准備的數據,是一個DataTable:

 private DataTable Poultry()
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Name"), new DataColumn("Picture"), new DataColumn("Description") });
        dt.Rows.Add("", "雞.jpg", "雞是人類飼養最普遍的家禽。家雞源出於野生的原雞,其馴化歷史至少約4000年,但直到1800年前后雞肉和雞蛋才成為大量生產的商品。");
        dt.Rows.Add("鴿", "鴿.jpg", "一種常見的鳥。世界各地廣泛飼養,鴿是鴿形目鳩鴿科數百種鳥類的統稱。我們平常所說的鴿子只是鴿屬中的1種,而且是家鴿。");
        dt.Rows.Add("", "鴨.jpg", "鴨子:英文名稱:Duck。脊椎動物門,鳥綱雁形目,鴨科鴨屬動物,是由野生綠頭鴨和斑嘴鴨馴化而來。鴨是雁形目鴨科鴨亞科水禽的統稱,或稱真鴨。鴨的體型相對較小,頸短,一些屬的嘴要大些。腿位於身體后方,因而步態搖搖擺擺。");
        dt.Rows.Add("", "鵝.jpg", "鵝,被認為是人類馴化的第一種家禽,它來自於野生的鴻雁或灰雁。中國家鵝來自於鴻雁,歐洲家鵝則來自灰雁。鵝是鳥綱雁形目鴨科動物的一種。");
        return dt;
    }
View Code

 

 既然涉及到圖片,當然少不了圖片文件,好,也准備四張,放在站點某一個目錄之下:


在網頁上拉一個GridView控件,當然你可以拉DataList,Repeater或asp:Table控件等。Insus.NET就是喜歡asp.net的控件,因為它們就是芝麻,不能可以丟開芝麻去撿西瓜;它們就是AK-47。



去.aspx.cs為上面的GridView的控件綁定數據:


網頁運行一下,看看是否有異常,無異常看看效果:



下面開始寫把GridView控件顯示的數據導出至Excel。去下面這個地址,下載導出Excel的組件:
http://www.cnblogs.com/insus/archive/2013/01/16/2862106.html
解壓之后,放入站點的bin目錄中。


去.aspx網頁,拉一個Button銨鈕,還要寫好OnClick事件。



去.aspx.cs代碼頁,寫Button1_Click事件實現過程:



0,引用命名空間。因為剛才下載的組件在實例時,是在這個命名空間之下。
1,實例化導出Excel組件,InsusExportToExcel。
2,實例化之后,可以使用它的ExportExcel()方法。此方法有兩個參數,第一個是將導出excel的控件,如DataList, Repeater或Table等;第二個參數是導出Excel的文件名。
3,如果你是為Gridview控件應用的話,這部分代碼必須的。其它數據控件導出excel就不必了。


OK,運行與執行按鈕的事件看看,得到什么效果:



哇,有點失望了,圖片還是沒有顯出來。其實完成上面所有步驟,只是原軟件所出現問題的結果。下面才是真正解決問題所在。
為什么它不能顯示出來呢? 在解決問題時,Insus.NET有嘗試在GridView顯示互聯網的一張圖片,發現它竟能導出至Excel文件中,而在站點的圖片即不能。后來Insus.NET又把此圖片下載至站點上。然后使用下面語句來顯示那張圖片。

 <asp:Image ID="Image1" runat="server" ImageUrl='<%# ResolveUrl("~/Images/" + Eval("Picture")) %>' Width="100" Height="100" />


再執行導出至Excel文件中,圖片又不顯示了。奇了......
原來,圖片的路徑有問題,完整的圖片路徑的圖片可以在導出至Excel之后,能正常顯示。
問題原因找到了,需要解決圖片路徑了,寫一個函數:



上面的函數,是獲取下圖中的高亮的路徑:


現在,我們可以修改Gridview的路徑了:



好了,大功告成,看看效果:




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM