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;
    }
复制代码

 

既然涉及到图片,当然少不了图片文件,好,也准备四张,放在站点某一个目录之下:

在网页上拉一个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的路径了:

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

标签