Есть ли способ напечатать PDF, но установить значения вручную и не брать их из основного HTML?

Question

Мне нужно добавить опцию «Печать PDF» на мой сайт, но моя проблема в том, что я использую Ext.js, поэтому код моего сайта не в HTML. Я искал о том, как распечатать PDF-файл с веб-сайта, и я нахожу, как сделать это через HTML. Поэтому мне интересно, есть ли какая-либо библиотека или что-то для установки того, что я хочу напечатать вручную, вместо того, чтобы брать это из HTML-кода.

Вот так я определяю таблицу, которую хочу распечатать в файле 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;
  }
}

И, наконец, вот так я заполняю таблицу

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

Как видите, у меня нет HTML-кода. Ext.js использует JavaScript, как бы мне этого добиться?

Заранее спасибо.

Answer 1

Вы можете использовать PDFMake или PDFKit библиотеки.

PDFMake (библиотека создания документов PDF для использования на стороне сервера и на стороне клиента в чистом JavaScript.).

PDFKit (PDFKit являетсяБиблиотека создания документов PDF для Node и браузера, которая упрощает создание сложных многостраничных, печатаемых документов. API обеспечивает возможность объединения в цепочку и включает в себя как функции низкого уровня, так и абстракции для функциональности более высокого уровня. API PDFKit разработан так, чтобы быть простым, поэтому создание сложных документов часто так просто, как несколько вызовов функций.)

---

Обновлено!Как использовать PDFKit в браузере?

Чтобы использовать PDFKit внутри браузера, сначала необходимо добавить blobStream JS , чем 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('Stackoverflow with smile :) ', 100, 80);

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

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

});

Демо