Question

我已经制作了一个将HTML转换为PDF文件的项目。

但是，我希望它可以在新窗口中打开，而不是强制客户端下载文件。我怎么能这样做？

在此代码中，我可以将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>

Answer 1

您可以尝试doc.output('dataurlnewwindow')，但至少Firefox和Chromium可能会将其屏蔽为弹出窗口。这没关系，因为我真的讨厌为我打开新窗口的页面。

如何在新标签页中使用jspdf打开来制作pdf转换结果？

1 个答案: