有没有一种方法可以打印 PDF 但手动设置值而不是从主 HTML 中获取它们？

Question

我需要在我的网站上添加一个"Print PDF"选项，但我的问题是我使用Ext.js，所以我网站的代码不在HTML中。我一直在搜索如何从网站上打印 pdf，但我只找到了如何通过 HTML 进行打印。所以我想知道是否有任何库或其他东西可以设置我想要手动打印的内容，而不是从 HTML 代码中获取。

这就是我定义 table 我想打印成 PDF 文件的方式

const store = Ext.create('Ext.data.Store', {
                storeId:'hotelsStore',
                fields:['name', 'Best price', 'Price1', 'Price2', 'Price3'],
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'items'
                    }
                }
            });

            const grid = Ext.define('KitchenSink.view.grid.CellEditing', {
                extend: 'Ext.grid.Panel',                
                xtype: 'cell-editing',
                initComponent: function() {                   
                    Ext.apply(this, {
                        store: Ext.data.StoreManager.lookup('hotelsStore'),
                        columns: [
                        {
                            header: 'Name',
                            dataIndex: 'name',
                            width: 300                           
                        }, {
                            header: 'Best price',
                            dataIndex: 'bestPrice',
                            width: 105
                        },
                        {
                            header: 'Price1',
                            dataIndex: 'priceSite1',
                            width: 200
                        },
                        {
                            header: 'Price2',
                            dataIndex: 'priceSite2',
                            width: 200
                        },
                        {
                            header: 'Price3',
                            dataIndex: 'priceSite3',
                            width: 200
                        },
                        {
                            xtype: 'actioncolumn',
                            width: 30,
                            sortable: false,
                            menuDisabled: true,
                            id: 'delete-column',
                            items: [{
                                icon: '/assets/img/delete.png',
                                tooltip: 'Delete',
                                scope: this,
                                handler: this.onRemoveClick
                            }],

                        }],
                        dockedItems: [{
                            xtype: 'toolbar',
                            items: [{
                                text: 'Add',
                                scope: this,
                                handler: this.add
                            }, {
                                text: 'Print values',
                                scope: this,
                                hander: this.printValues
                            }, {
                                text: 'Logout',
                                scope: this,
                                handler: this.logout
                            }]
                        }],                     
                    });

                    this.callParent();
},

我想在 PDF 中打印的值在这个数组中：

function fillData()
  for(var i = 0; i<hotelNames.length; i++) {
      dataArray.push({ 'name': names[i], 'bestPrice': results[i2], 'Price1': 
      results[i4], 'Price2': results[i5], 'Price3': results[i6]})
      i2 = i2 + 4;
      i3 = i3 + 4;
      i4 = i4 + 4;
      i5 = i5 + 4;
      i6 = i6 + 4;
  }
}

最后，这就是我填写 table

的方式

fillData();
store.getProxy().data = dataArray;
store.load();

如您所见，我没有任何 HTML 代码。 Ext.js 使用 JavaScript，那么我该如何实现呢？

提前致谢。

Answer 1

您可以使用 PDFMake or PDFKit 个库。

PDFMake（用于 server-side 和 client-side 纯 JavaScript 用法的 PDF 文档生成库）。

PDFKit（PDFKit 是用于 Node 和浏览器的 PDF 文档生成库，可以轻松创建复杂的 multi-page 可打印文档。API包含可链接性，包括低级功能和高级功能的抽象。PDFKit API 设计简单，因此生成复杂文档通常与几个函数调用一样简单。）

已更新！如何在浏览器中使用PDFKit？

要首先在浏览器中使用 PDFKit，您应该添加 blobStream JS than PDFkit JS

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- blobStream JS -->
    <script src="lib/blob-stream.js"></script>
    <!-- PDFKit JS -->
    <script src="lib/pdfkit.js"></script>

    <!-- Other Scripts -->

    <script src="lib/script.js"></script>

    </head>
<body>
    <a href="#" id="printDoc" > Print Something </a>
</body>
</html>

script.js

var element = document.getElementById('printDoc'); 
element.addEventListener('click', ()=>{
 // create a document and pipe to a blob
        var doc = new PDFDocument();
        var stream = doc.pipe(blobStream());

        // draw some text
        doc.fontSize(25).text('Whosebug with smile :) ', 100, 80);

        doc.end();
        stream.on('finish', function () {

               window.open(stream.toBlobURL('application/pdf'), '_blank');
        });

});

Demo

有没有一种方法可以打印 PDF 但手动设置值而不是从主 HTML 中获取它们？

Is there a way to print a PDF but setting the values maunally and not taking them from the main HTML?

javascript

pdf

pdf-generation

extjs