使用Javascript的表格和圖表

Question

通過僅使用NodeJS或Javascript，我想創建一個包含該圖表的圖表和數據表的簡單網頁。之後，我想將表格和圖表保存爲PDF文件。 重要：我的設備，網頁將繼續運行，是獨立的，一旦運行它將連接到無法訪問Internet的網絡。也就是說，有必要在設備上安裝所有設備（沒問題！），因爲它無法訪問外部組件或資源。

如何在網頁上創建圖表和表格並保存爲PDF文件？

Answer 1

您可以使用jsPDF這裏位於https://parall.ax/products/jspdf和下方是一個工作示例

var doc = new jsPDF() 
 

 
doc.text('Hello world!', 10, 10) 
 
doc.save('a4.pdf')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>

var chart_data = { 
 
    labels: ['Player1', 'Player2', 'Player3', 'Player4'], 
 
    datasets: [{ 
 
    fillColor: "rgba(6, 118, 152, 0.71)", 
 
    strokeColor: "rgba(220,220,220,1)", 
 
    pointColor: "rgba(220,220,220,1)", 
 
    pointStrokeColor: "#fff", 
 
    pointHighlightFill: "#fff", 
 
    pointHighlightStroke: "rgba(220,220,220,1)", 
 
    data: [20, 34, 15, 64, ] 
 
    }] 
 
} 
 

 
//original canvas 
 
var canvas = document.querySelector('#cool-canvas'); 
 
var context = canvas.getContext('2d'); 
 

 
new Chart(context).Line(chart_data); 
 

 
//hidden canvas 
 
var newCanvas = document.querySelector('#supercool-canvas'); 
 
newContext = newCanvas.getContext('2d'); 
 

 
var supercoolcanvas = new Chart(newContext).Line(chart_data); 
 
supercoolcanvas.defaults.global = { 
 
    scaleFontSize: 600 
 
} 
 

 
//add event listener to button 
 
document.getElementById('download-pdf').addEventListener("click", downloadPDF); 
 

 
//donwload pdf from original canvas 
 
function downloadPDF() { 
 
    var canvas = document.querySelector('#cool-canvas'); 
 
    //creates image 
 
    var canvasImg = canvas.toDataURL("image/jpeg", 1.0); 
 

 
    //creates PDF from img 
 
    var doc = new jsPDF('landscape'); 
 
    doc.setFontSize(20); 
 
    doc.text(15, 15, "Cool Chart"); 
 
    doc.addImage(canvasImg, 'JPEG', 10, 10, 280, 150); 
 
    doc.save('canvas.pdf'); 
 
} 
 

 
//add event listener to 2nd button 
 
document.getElementById('download-pdf2').addEventListener("click", downloadPDF2); 
 

 
//download pdf form hidden canvas 
 
function downloadPDF2() { 
 
    var newCanvas = document.querySelector('#supercool-canvas'); 
 

 
    //create image from dummy canvas 
 
    var newCanvasImg = newCanvas.toDataURL("image/jpeg", 1.0); 
 

 
    //creates PDF from img 
 
    var doc = new jsPDF('landscape'); 
 
    doc.setFontSize(20); 
 
    doc.text(15, 15, "Super Cool Chart"); 
 
    doc.addImage(newCanvasImg, 'JPEG', 10, 10, 280, 150); 
 
    doc.save('new-canvas.pdf'); 
 
}

button { 
 
    margin-top: 30px; 
 
    padding: 10px 20px; 
 
    border-radius: 0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
 
<div> 
 
    <canvas id="cool-canvas" width="600" height="300"></canvas> 
 
</div> 
 

 
<div style="height:0; width:0; overflow:hidden;"> 
 
    <canvas id="supercool-canvas" width="1200" height="600"></canvas> 
 
</div> 
 

 
<button type="button" id="download-pdf"> 
 
    Download PDF 
 
</button> 
 

 
<button type="button" id="download-pdf2"> 
 
    Download Higher Quality PDF 
 
</button>