Question

使用jsPDF使用PhantomJS生成pdf文档时， export.pdf 输出文件中的图像质量非常差。

运行脚本的命令：

phantomjs test.js

test.js

var page = require('webpage').create(),
    fs = require('fs');

page.viewportSize = {
    width: 1280,
    height: 720
};

page.onLoadFinished = function (status) {
    page.evaluateJavaScript('function(){ window._isPhantomjs = true; }');
    page.evaluate(function () {
        document.querySelector('.js-generate-pdf').click();
    });

    setTimeout(function () {
        var exportData = page.evaluate(function () {
            return window.pdfContent;
        });

        fs.write('./' + 'example.pdf', exportData, 'w');

        phantom.exit();
    }, 1000);
};

page.open('http://localhost:8586/'); // url by which index.html is available

的index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Phantom Demo</title>

<script src="./bower_components/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/jspdf/dist/jspdf.min.js"></script>
</head>

<body>
    <section>
        <button type="submit" class="js-generate-pdf">Generate!</button>
    </section>

    <script type="text/javascript">
        $(document).ready(function(params) {
            $('.js-generate-pdf').on('click', function() {
                var self = this;

                self.doc = new jsPDF('landscape');

                self.doc.setFontSize(24);
                self.doc.setTextColor(195);
                self.doc.setFont('helvetica', 'bold');
                self.doc.addImage('data:image/png;base64,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', 'PNG', 10, 197); self.doc.setLineWidth(0.2);
                self.doc.setDrawColor(210, 210, 210);
                self.doc.line(0, 190, 310, 190);
                self.doc.setFont('helvetica', 'normal');
                self.doc.setFontSize(12);
                self.doc.setTextColor(100);
                self.doc.text(285, 201, '1');

                if (window._isPhantomjs) {
                    window.pdfContent = self.doc.output();
                } else {
                    self.doc.save('example.pdf');
                }
            });
        });
    </script>
</body>

</html>

可能是什么原因？提前谢谢

通过jsPDF生成pdf的PhantomJS会扭曲图像

0 个答案: