[ASP.net WebForm] 網頁中嵌入Word、Excel檔

[ASP.net] 網頁中嵌入Word、Excel

要在網頁中開啟、嵌入Word、Excel檔

 

Office 2003以前版本(doc,xls),最快辦法就是使用iframe去指定src

(Client端電腦只能裝Office 2003軟體)

使用瀏覽器執行時若出現開啟或儲存的視窗

image

↑點擊「開啟」

之後畫面如下:

image[41]

Word的話,畫面如下:

image[45]

Client端電腦若安裝Office 2007以後版本,iframe無法直接這樣做(即使開啟的檔案為2003的.doc或.xls)

 

這邊就用我的對外測試domainName:http://shadow1.no-ip.info

來做demo

代碼:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function changeSrc(fileUrl) {

            $("#iframeShow").attr("src", fileUrl);

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <!--直接改變iframe的src-->
    <input type="button" onclick="changeSrc('files/word2003.doc');" value="Word 2003" />
    <!--直接改變iframe的src-->
    &nbsp;<input type="button" onclick="changeSrc('files/excel2003.xls');" value="Excel 2003" />
    <!--把iframe的src改成連結Google Doc Viewer-->
    &nbsp;<input type="button" onclick="changeSrc('http://docs.google.com/viewer?url=' + encodeURIComponent('http://shadow1.no-ip.info/files/excel2007.xlsx') + '&embedded=true');"
        value="Excel 2007" />
    <!--把iframe的src改成連結Google Doc Viewer-->
    &nbsp;<input type="button" onclick="changeSrc('http://docs.google.com/viewer?url='+ encodeURIComponent('http://shadow1.no-ip.info/files/word2007.docx') + '&embedded=true');"
        value="Word 2007" />
    <!--超連結到Google Doc Viewer-->
    &nbsp; <a href='<%= "http://docs.google.com/viewer?url=" + Server.UrlEncode("http://shadow1.no-ip.info/files/excel2007.xlsx") + "&embedded=true"%>'
        target="_blank">IE excel 2007</a>
    <!--超連結到Google Doc Viewer-->
    &nbsp; <a href='<%= "http://docs.google.com/viewer?url=" + Server.UrlEncode("http://shadow1.no-ip.info/files/word2007.docx") + "&embedded=true"%>'
        target="_blank">IE word 2007</a>
    <!--iframe內嵌Word,Excel的區塊-->
    <div style='height=1080'>
        <iframe id="iframeShow" frameborder="0" width="100%" height="1080" src=""></iframe>
    </div>
    </form>
</body>
</html>

 

 

在只裝Office 2007的Client端電腦上,點選左方兩個按鈕雖然也會跳出開啟/儲存視窗

image[57]

但一點擊開啟後(Word和Excel)

image[58]

會發現直接用jQuery改變iframe的src,會變成Client端電腦使用Office 2007程式來開啟檔案,並沒有內嵌網頁效果

 

我也嘗試過這樣測試


//即使由attachment寫成inline,網頁仍會跳出一個視窗讓User選擇下載或用office程式開啟

    protected void Button1_Click(object sender, EventArgs e)
    {
        FileStream fs = new FileStream(Server.MapPath("~/files/excel2003.xls"), FileMode.Open);
        
        byte[] file = new byte[fs.Length];
        fs.Read(file, 0, file.Length);
        fs.Close();



        Response.Clear();
        Response.AddHeader("content-disposition", "inline; filename=excel2003.xls");
        Response.ContentType = "application/ms-excel";
        Response.BinaryWrite(file);

    }

 

 

所以一個替代方案為使用Google Docs Viewer(可以另開視窗網頁嵌Word,Excel,也可以透過iframe內嵌)

參數說明:


http://docs.google.com/viewer?url=http://domainName/檔名&embedded=true 
<!--url參數要用絕對路徑,並做UrlEncode--> 

 

embedded=true加上此屬性的話,會用內嵌模式呈現

Excel 2007檔+Google Docs Viewer的內嵌畫面:

image[62]

Word 2007檔+Google Docs Viewer的內嵌畫面:

image[66]

 

以下看看若把embedded=true 屬性拿掉的話,Google Docs Viewer呈現的畫面

Excel 2007:

image[22]

Word 2007:

image[26]

但使用Google Docs Viewer有幾個缺點:

因為是透過超連結連到Google的元件再連回本機的檔案

所以若在本機開發時期

沒有一個對外DomainName或IP,會很難調試,

然後不知道為什麼在本機用iframe的方式內嵌Word、Excel,IE瀏覽器都顯示不出來,從Client端其他電腦連回來看時又正常?

本機調試時只好使用firefox

 

以上的程式範例檔

 

其餘要在網頁嵌入Word、Excel,似乎還有其他辦法?

  1. 先把Word、Excel轉成Html,再改變iframe的src
  2. 先把Word、Excel轉成PDF檔,再改變iframe的src
  3. 先把Word、Excel轉成.swf ,然後?

以上三點都是論壇上別人提供的想法,但礙於最近忙,一直沒時間證明該三點實作結果如何

只好有空再研究吧

 

 

相關討論:

asp.net网页中嵌入word2010文档

請問有辦法將EXCEL檔直接開啟嗎

问一个关于word转换的问题

网页阅读PDF技术是怎么实现

相關文章:

[PHP]網頁呈現PDF檔案的資料內容