在HTML5畫布內創建表格

我有一個項目，我需要將html表格元素保存爲圖像。看起來最好的方法是將表中的數據轉換成畫布，然後調用DataURL來獲取圖像。在搜索了很多here提到的表格之後，它們看起來像是隻是在常規的html表格中放置一個包裝，使它看上去更有趣。在HTML5畫布內創建表格

是否有任何簡單的方法或庫（這是不花哨）在畫布元素內以表格格式繪製數據？
是否有另一種方法，我缺少將表格元素的內容保存到圖像？

既然這是一個Rails項目，我寧願如果JS庫使用JQuery。

編輯

我忘了提及表中的一些條目是鏈接。很顯然，這在正常的html表格中運行良好，但它也需要在canvas版本中工作。

編輯2

顯然我在第一次編輯中不清楚。顯示給用戶的版本（無論是表格還是畫布）需要有鏈接。顯然，最終的圖像不會。

來源

2013-02-11 Jon

喬恩，只是一個問題來澄清：您的服務器（PHP/IIS）生成的數據創建HTML表？如果是這樣，你可以考慮使用php或iis服務器插件來將數據表示爲pdf。 – markE 2013-02-11 18:09:45

一個有趣的命題，如果畫布渲染不起作用，那麼我會嘗試。我使用的是Rails，所以我實際上是直接用ERB將數據插入到DOM中。 – Jon 2013-02-11 18:31:04

下面是一個例子（改：https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas）

http://jsfiddle.net/StEcW/1/

$(function() { 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" + 
     "<foreignObject width='100%' height='100%'>" + $("#mytable").html() + 
     "</foreignObject>" + 
     "</svg>"; 
    var DOMURL = self.URL || self.webkitURL || self; 
    var img = new Image(); 
    var svg = new Blob([data], { 
     type: "image/svg+xml;charset=utf-8" 
    }); 
    var url = DOMURL.createObjectURL(svg); 
    img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
     DOMURL.revokeObjectURL(url); 
    }; 
    img.src = url; 
}); 

<div id="mytable"> 
    <div xmlns="http://www.w3.org/1999/xhtml" style='font-size:12px'>  
     <table border=1 id="amytable"> 
      <tr> 
       <td>Hello</td> 
       <td>There</td> 
      </tr>   
     </table> 
    </div> 
</div>

這工作得很好，但看到搗鼓可能左右一些CSS怪事，可能工作會不正常。至少在Chrome中，對於我來說，表格邊框的顯示方式不同。

編輯：當然，通過畫布實際上並沒有多大意義。畫布只是繪製我們已經創建的圖像。你所需要做的就是在DOM中顯示圖像。

來源

2013-02-11 17:25:17 aquinas

不幸的是，這在我的情況下不起作用，因爲表格中的一些條目需要鏈接。我試圖在小提琴上添加一個href，並且它在畫布上沒有正確渲染。我已經更新了我的問題來補充這個事實。 – Jon 2013-02-11 17:34:20

咦？你說，「...我需要保存一個HTML表格元素作爲圖像。」如果您將它保存爲圖像，您打算如何使用超級鏈接工作...與圖像？ – aquinas 2013-02-11 17:38:57

對不起，我不夠具體。表格顯示時需要鏈接。圖像沒有。我假設我只是向用戶顯示畫布，但我想我不需要。我可以轉換爲畫布，然後轉換爲圖像並保存，並將原始表格顯示給用戶。你認爲這會起作用嗎？ – Jon 2013-02-11 17:43:59

在HTML5畫布內創建表格

回答

相關問題