NodeJS または Javascript のみを使用して、グラフとそのグラフのデータ テーブルを含む単純な Web ページを作成したいと考えています。その後、表と図をPDFファイルで保存したいと思います。重要: Web ページが実行され続ける私のデバイスはスタンドアロンであり、実行されると、インターネット アクセスなしでネットワークに接続されます。つまり、デバイスにすべてをインストールする必要があります (問題ありません!)。これは、リソースの外部コンポーネントにアクセスできないためです。
ウェブページにチャートと表を作成してPDFファイルに保存するにはどうすればよいですか?
ここにある 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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加