HTML
をPDF
ファイルに変換するプロジェクトを作成しました。新しいタブでjspdf openingを使ってpdf convertの結果を作るには?
ただし、クライアントにファイルをダウンロードさせる代わりに、新しいウィンドウで開くことができます。どうやってやるの?
このコードでは、HTML
テーブルとhighchart
をpdfに変換するだけで、ルートファイルまたはダウンロードファイルに保存されます。新しいタブでPDFを開くにはどうすればよいですか?ここに私のコードは次のとおりです。
<script>
$(document).ready(function() {
// create canvas function from highcharts example http://jsfiddle.net/highcharts/PDnmQ/
(function (H) {
H.Chart.prototype.createCanvas = function (divId) {
var svg = this.getSVG(),
width = parseInt(svg.match(/width="([0-9]+)"/)[1]),
height = parseInt(svg.match(/height="([0-9]+)"/)[1]),
canvas = document.createElement('canvas');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
if (canvas.getContext && canvas.getContext('2d')) {
canvg(canvas, svg);
return canvas.toDataURL("image/jpeg");
}
else {
alert("Your browser doesn't support this feature, please use a modern browser");
return false;
}
}
}(Highcharts));
$('#save').click(function() {
var doc = new jsPDF();
// chart height defined here so each chart can be palced
// in a different position
var chartHeight = 90;
// All units are in the set measurement for the document
// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
doc.setFontSize(40);
html2canvas($("#kanan"), {
onrendered: function (canvas) {
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'mm');
$('.myChart').each(function (index) {
var imageData = $(this).highcharts().createCanvas();
// add image to doc, if you have lots of charts,
// you will need to check if you have gone bigger
// than a page and do doc.addPage() before adding
// another image.
/**
* addImage(imagedata, type, x, y, width, height)
*/
doc.addImage(imgData, 'PNG', 10, 10);
doc.addImage(imageData, 'JPEG', 45, (index * chartHeight) + 40, 120, chartHeight);
doc.save('Laporan Termocouple.pdf');
});
}
});
//loop through each chart
//save with name
});
//charts
// JavaScript Document
$(function() {
var chart;
$(document).ready(function() {
$.getJSON("dataline.php", function (json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart1',
type: 'line'
},
title: {
text: 'Termocouple Graph Result'
},
subtitle: {
text: ''
},
xAxis: {
title: {
text: 'Sensor'
},
categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 120,
borderWidth: 0
},
series: json
});
});
});
});
});
<!-- language: lang-html -->
<div class="container">
<div id="grafik" style="width: auto; height:300px;"></div>
<input class="btn btn-default" type="button" value="Save" name="save" id="save" />
<div id="chart1" class="myChart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
</form>
</div>
pdfファイルを表示しますか?それをHTMLから変換した後?あなたはコードを投稿しましたが、コードのどこに問題があるのですか? PDFを変換して開こうとしましたか? –
そのコードから私はpdfファイルを得ることができますが、pdfファイルを最初にダウンロードする必要があります。 –
私は、pdf変換の結果を新しいタブにロードしただけにする必要があります。どのようにそれを知っていますか? –