堆棧內存溢出
  簡體   English   中英

保存javascript生成的文檔

[英]Save the document generated by javascript

 原文  2009-09-25 18:59:17  1   12    javascript/ document/ client-side/ server-side/ html-generation

問題描述

Javascript可以操縱瀏覽器顯示的文檔，因此以下內容： 

<script>
    document.write("<table><tr><td>Hola</td><td>Adios</td></tr></table>");
</script>

將使瀏覽器顯示一個表，就像它是原始HTML文檔一樣： 

<table>
    <tr>
        <td>Hola</td>
        <td>Adios</td>
    </tr>
</table>

有沒有辦法保存/提供此文檔內容？

目前我們使用Ext-js生成一些很好的報告，我想做的是擁有它的“text / html”版本（我的意思是，不需要javascript的東西）

所以在頁面的最后我會添加一個按鈕：“另存為blaba”，文檔應該顯示文本/純文本版本。

我現在能想到的唯一方法是將內容寫入javascript變量，如： 

 var content = document.toString(); // or something magic like that.
 // post it to the server

然后將該值發布到服務器，並讓服務器顯示該值。 

 <%=request.getParameter("content-text")%>

但看起來很棘手。

還有其他選擇嗎？

編輯

好的，我幾乎得到了它。 現在我只需要彈出新窗口，這樣選項“你想保存它嗎”

這是我到目前為止所得到的 

<script>
    document.write("<div id='content'><table><tr><td>Hola</td><td>Adios</td></tr></table></div>");
    function saveAs(){
        var sMarkup =  document.getElementById('content').innerHTML; 
        var oNewDoc = document.open('application/vnd.ms-excel');        
        oNewDoc.write( sMarkup + "<hr>" );
        oNewDoc.close();
    }
</script>

<input type="button" value="Save as" onClick="saveAs()"/>

這條線： 

    var oNewDoc = document.open('application/vnd.ms-excel');

應指定新的內容類型，但它將被忽略。

12 個解決方案

解決方案1
 7  2009-09-25 19:04:29

除非使用File -> Save Page As...保存客戶端，否則您必須完全按照您的建議進行操作，將$('body').html()到您的服務器並將其作為文本處理。

解決方案2
 5  2009-09-25 19:05:28

這個鏈接似乎解釋了如何解決您的問題。

解決方案3
 4 已采納  2009-10-22 09:38:51

這是以.xls格式打開表格內容的升級版本。 

<head>
<script>

         document.write("<table id='targetTable'><tr><td>Hola</td><td>Adios</td></tr><tr><td>eins</td><td>zwei</td></table>"); 
        function saveAsXLS()
        {
            var xlObj = new ActiveXObject("Excel.Application");
            var xlBook = xlObj.Workbooks.Add();
            var xlSheet = xlBook.Worksheets(1);
            for (var y=0;y<targetTable.rows.length;y++) // targetTable=id of the table
            {
                for (var x=0;x<targetTable.rows(y).cells.length;x++)
                {
                    xlSheet.Cells(y+1,x+1)=targetTable.rows(y).cells(x).innerText;
                }
            }   
            xlObj.Visible=true;
            document.write("The table contents are opened in a new Excel sheet.");//Print on webpage 
        }
</script>
</head>
<body>  
<input type="button" value="Open table in Excel!" onclick="saveAsXLS()"/> 
</body>

此代碼在IE6中進行測試，並使用ActiveXObject控件。

  • 我在這里使用的表是2x2的順序，各個內容分別映射到excel表。
  • 與.doc版本不同，這不會將文件保存在客戶端系統中。 它使用表格內容打開應用程序，客戶端必須保存它。

希望這有助於回答你的問題。 Lemme知道你是否面臨任何問題。

和平。

解決方案4
 3  2009-10-22 04:36:48

根據您的瀏覽器支持要求，您可以使用數據URI

概念驗證的核心（在Firefox 3.5.3中測試）： 

document.write("<div id='content'><table><tr><td>Hola</td><td>Adios</td></tr></table></div>");
function extract(){
  return document.getElementById('content').innerHTML; 
}
function dataURI(s){
  return 'data:application/vnd.ms-excel;base64,' + encode64(s);
}
document.write('<a href="' + dataURI(extract()) + '">open</a>');

我從在線示例中提取了64位編碼/解碼。 小心：我抓到的那個在base 64編碼之前包含了一個URI編碼，這讓我搞砸了一會兒。

解決方案5
 2  2009-10-17 11:09:18

你正在接近我的想法。 問題是' document.open(...) ' 只能采用標准的mime類型，例如'text / html'，'text / plain'和其他幾個

因此，您的代碼應該是： 

<script>
    document.write("<div id='content'><table><tr><td>Hola</td><td>Adios</td></tr></table></div>");
    function saveAs(){
        var sMarkup =  document.getElementById('content').innerHTML; 
        var oNewDoc = document.open('text/html');        
        oNewDoc.write( sMarkup + "<hr>" );
        oNewDoc.close();
    }
</script>

<input type="button" value="Save as" onClick="saveAs()"/>

希望這可以幫助。

解決方案6
 2  2014-09-18 03:10:14

 $(function(){ $('.bbutton').click(function(){ var url='data:application/vnd.ms-excel,' + encodeURIComponent($('#tableWrap').html() ) location.href=url return false }) }) 
 .table{background:#ddd;border:1px solid #aaa;} .table thead th{border-bottom:1px solid #bbb;} .table tr td{background:#eee;border-bottom:1px solid #fff; border-left:1px solid #ddd;text-align:center;} .table tr:hover td{background:#fff;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id='tableWrap'><table style='width:98%;box-shadow:none;' class='table'> <thead><th>id</th><th>Name</th><th>Address</th></thead> <tr><td>1</td><td>Jyoti Telecom Services</td><td>http://www.tsjyoti.com</td></tr> <tr><td>2</td><td>Recharge</td><td>http://recharge.tsjyoti.com</td></tr> <tr><td>3</td><td>Bhuri Bharaj</td><td>http://bhuribharaj.tsjyoti.com</td></tr> </table></div> <p>Your download's ready as Excel Sheet <a href='#'class='bbutton'>Click Here for download</a></p>

解決方案7
 1  2009-10-20 20:46:20

如果它只是一個報告，您可以使用服務器端JavaScript生成它，然后使用您需要的任何MIME類型提供它...

解決方案8
 1  2009-10-21 05:29:25

我不認為將您的HTML發送到服務器是一個棘手的解決方案。 您只需要記住給用戶提供下載此文件的鏈接。 這可以使用傳統的POST，甚至使用AJAX來完成。 這取決於您希望用戶在您的網頁上進行互動的方式。

使用傳統帖子，您可以將所有html內容放在頁面中隱藏的輸入類型的value屬性中，名為“html_content”或類似名稱，當用戶點擊“保存”按鈕時，您將用戶發送到另一個帶鏈接的頁面執行該文件。 您將html發送到服務器，腳本在具有唯一名稱的文件系統中創建文件，並返回下載鏈接。

使用AJAX，你只需要做一個AJAX POST傳遞這個變量，然后你的腳本返回一個下載鏈接，你動態地將它放在你的html中 - 無需重新加載你的頁面，就像它是“只有客戶端”。

無論哪種方式，您都將返回指向您剛剛在文件系統中使用html擴展名創建的資源的鏈接。 請記住在服務器中為每個生成的文件生成唯一的名稱以避免沖突。

請注意，雖然在IE 6中使用innerHTML（我不知道這是IE家族行為還是僅僅是6版本），但是大寫所有標簽並從屬性中刪除引號。 如果您打算在HTML中進行一些后期處理，請小心。

我不知道jQuery或其他JS庫在這種情況下的行為。 我建議使用它，但它們有大量的瀏覽器兼容性檢查來抽象我們使用的所有這些黑客。

解決方案9
 1  2009-10-21 14:26:05

這是我的代碼，用JavaScript將生成的內容[客戶端]保存到MSWord [.doc]格式的本地C：驅動器中。 

<script>

    document.write("<div id='content'><table><tr><td>Holaa</td><td>Adiosa</td></tr></table></div>"); 
    function saveAs()
        {
            var wordObj=new ActiveXObject("Word.Application");
            var docText;
            var obj;
            var textToWrite = document.getElementById('content').innerHTML;
            if (wordObj != null)
            {
                wordObj.Visible = false;
                wordDoc=wordObj.Documents.Add();
                wordObj.Selection.TypeText(textToWrite);
                wordDoc.SaveAs("C:\\Eureka.doc");
                wordObj.Quit();
                document.write("The content has been written to 'C:\\Eureka.doc'");//Print on webpage 
            }
        }
</script>

<body>

<input type="button" value="Save in C:" onclick="saveAs()"/> 

</body>

我很快就解決了你的問題並提出了這段代碼。 希望我能正確理解你的問題。

我的代碼中的約束是

  • 文件格式為.doc而不是.xls。
  • 其次，文件保存在靜態位置，而不是用戶指定的位置[可以優化]。
  • 並且，代碼使用ActiveX，我沒有檢查在服務器端環境中的工作。

這些需要在即將發布的版本中解決。 （：

和平。

解決方案10
 0  2009-09-25 19:05:24

您的javascript AJAX是從服務器獲取document.writeln（）內容，還是在向用戶提供頁面時是否已生成該內容？ 因為如果它是前者，我認為沒有理由為什么你不能在你使用的任何服務器端技術的會話中保存任何變量/查詢，然后只是從那些生成純文本的東西。 否則，您將不得不遵守上述旅行者的建議。

解決方案11
 0  2009-09-25 19:24:20

既然你正在使用Ext JS，你可能有一個Store對象為網格提供數據？ 您應該能夠通過遍歷商店提取所需的數據，然后按照您希望的方式對其進行格式化。 我不認為從生成的HTML中抓取數據是理想的。

一旦從網格中獲取所需數據並將其格式化為文本，就可以將其發布到后端以啟動下載（使用內容處置：附件等）

如果您不關心跨瀏覽器，您還可以使用data：URL方案在不涉及后端的情況下啟動下載。

解決方案12
 0  2013-08-23 17:40:26

這個插件完成了這項工作。 在IE，FF和Chrome上測試過。 https://github.com/dcneiner/Downloadify

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 保存 javascript 生成的錯誤 javascript 將文檔保存到.html 使用JavaScript生成的樣式保存HTML 將javascript生成的文件的字符集更改為utf8 如何使用 Javascript 讀取具有自動生成的文檔 ID 的 Firebase 文檔 將JavaScript生成的二進制文件保存到iPad 如何在文件中將JavaScript生成的內容另存為HTML？ 將圖像保存在使用javascript guillotine插件生成的php中 將streamlit里面用Javascript生成的文件保存到一個目錄下 將客戶端生成的數據保存為JavaScript中的文件
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM