Могу ли я использовать window.print () для автоматического экспорта страницы в PDF?

Question

Я ищу способы экспорта моего HTML-div в формат PDF.В настоящее время я рекомендую использовать window.print() для отправки страницы на печать, назначения «Сохранить как PDF» и продолжения оттуда.Это не идеально, и я здесь, чтобы спросить, возможно ли написать код для автоматизации части, где пользователь нажимает «Сохранить как PDF», а также части, где они называют этот файл.

В идеале, всеэто происходит, когда пользователь нажимает кнопку для экспорта, щелчок «Сохранить как PDF» происходит за кулисами, и файл автоматически называется report.pdf.Можно ли это кодифицировать?

Я также открыт для любых предложений о других способах экспорта моего HTML в формат PDF, однако я не могу использовать одну из следующих библиотек, чтобы помочь мне вэто:

• jsPDF НЕ поддерживает CSS само по себе, и поэтому об этом не может быть и речи.
• Я знаю, что jsPDF можно использовать вместе с rasterizeHTMLили html2canvas, однако оба они работают, снимая скриншот страницы и добавляя указанный скриншот в файл.Это означает, что страницу невозможно найти с помощью CTRL+F, что является одним из вариантов использования моего проекта.

Другой вариант, который у меня есть, - это использовать библиотеку Xportability , но какНа данный момент я не смог передать какие-либо таблицы стилей в вызов поколения PDF.Вот код ошибки, который генерирует PDF со всеми моими записанными данными, но не стилизуется с помощью предоставленного CSS:

<script id="finalReport" type="text/x-kendo-template">
    <h3 class="report-header">stub title</h3>
    <table class="report-table">
        <tr>
            <td>Report ID:</td>
            <td>stub</td>
        </tr>
    </table>
</script>

<style>
  .report-header {
        font-style: italic;
        font-weight: bold;
        text-align: left;
    }
</style>

<script id="main" type="text/javascript">
    function generateReport() {
        return xepOnline.Formatter.Format("finalReport", {
            render: 'download', pageWidth: '216mm', pageHeight: '279mm'
        });
    }
</script>

Как передать таблицу стилей?Я могу вручную добавить стиль к каждому элементу, и он работает так, но это было бы ужасно.

Answer 1

Вы можете использовать компонент Kendo UI pdf-export для загрузки определенных элементов div.

Пример кода:

$(".export-pdf").click(function() {
        // Convert the DOM element to a drawing using kendo.drawing.drawDOM
        kendo.drawing.drawDOM($(".content-wrapper"))
        .then(function(group) {
            // Render the result as a PDF file
            return kendo.drawing.exportPDF(group, {
                paperSize: "auto",
                margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
            });
        })
        .done(function(data) {
            // Save the PDF file
            kendo.saveAs({
                dataURI: data,
                fileName: "HR-Dashboard.pdf",
                proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
            });
        });
    });

для fileName вы можете указать любое имя файла, и файл будет сохранен с таким именем.

URL: Экспорт PDF / Экспорт документа

Answer 2

Добравшись до страницы печати, вы можете легко указать документу распечатать в формате PDF, нажав кнопку назначения