Ajay-Systematix Ответов: 2

Как напечатать полное содержимое HTML-страницы со стилем и CSS на PDF?

Привет,

Здесь мне нужно реализовать функциональность, в которой мне нужно написать HTML-страницу так, как она есть в PDF-файле.

Пример: 
But my requirement is different. Its not simple to create HTML in PDF. I need a functionality like write this current open page on PDF as it looks like.


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

Что я уже пробовал:

Я пытаюсь 
iTextSharp

F-ES Sitecore

Google "c# save html as pdf" - это один из самых часто задаваемых вопросов

Ajay-Systematix

Но мое требование другое. Это не просто создать HTML в формате PDF. Мне нужна такая функциональность, как запись этой текущей открытой страницы в формате PDF, как она выглядит.

F-ES Sitecore

Я не сказал, что это просто, я сказал, что это очень часто задаваемый вопрос, который означает, что уже есть тысячи статей о том, как это сделать, если вы ищете их в google.

Ajay-Systematix

Я также нашел ряд решений для этого. Но мое требование еще не выполнено.
Я нашел для него платную услугу третьей стороны. Но я не могу пойти с этим.

2 Ответов

Рейтинг:
2

Jochen Arndt

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

Проблема заключается в том, что HTML-контент динамически визуализируется в зависимости от размера видового экрана в пикселях и DPI монитора (используется для непиксельных размеров элементов), а PDF-файл основан на физических единицах длины, таких как дюйм или См.

Если бы это было возможно, я бы использовал драйвер PDF-принтера и использовал поддержку печати приложений. Он имеет то преимущество, что обеспечивает предварительный просмотр, так что вы можете просто проверить его результат.

Он также позволяет настроить размер страницы PDF таким образом, чтобы ее можно было настроить для получения результата, аналогичного экранному (используйте размер видового экрана и монитор DPI, чтобы получить требуемую ширину страницы). Это позволит избежать масштабирования, чтобы размеры были аналогичны размерам на экране. Вы также можете создавать "длинные" страницы, которые содержат весь контент на одной странице (но может быть ограничение, которого я на самом деле не знаю). Однако такие PDF-файлы будут предназначены только для просмотра на экране (возможно, они не будут хорошо распечатаны).

Обратите внимание, что ITextSharp поддерживает также определение размера страницы. Таким образом, вы также можете использовать это и попытаться получить приемлемые результаты.

Ajay-Systematix

Собственно, мое требование заключается в том, что мне нужно добавить форму обратной связи, которую уже заполнил мой рефери. Нужно распечатать эту HTML-форму обратной связи в формате PDF. Его максимальный размер-страница формата А4.

Еще одна вещь, которую эта HTML-страница сохранила в Sql DB.

Jochen Arndt

Тогда было бы более разумно сделать HTML-страницу похожей на страницу формата А4 (например, ограничив размер).

Где хранится HTML-страница, не должно быть все равно. Но я надеюсь, что вы не храните всю страницу в базе данных. Это был бы плохой дизайн. Поскольку это форма, было бы лучше хранить только входные значения. Тогда вы также не привязаны к HTML, но можете создать отчет databse и распечатать его.

Ajay-Systematix

Я использую мастер-макет для управления CSS страницы. Он мой клиент.

Jochen Arndt

Вы можете использовать стили, зависящие от устройства:
< голова>
& lt;link rel= "stylesheet" href= "stylesheet. css">
<ссылка отн="стилей" с href="печать-таблицы стилей.ПТК" СМИ="печать"и GT;
< / head>

Или добавьте переопределения для конкретных носителей в существующую таблицу стилей:
@media print {
/ * переопределение определенных стилей печати здесь */
}

Ajay-Systematix

Для обработки зависимости устройства я использую Bootstrap. Это прекрасно работает.

Рейтинг:
19

Ajay-Systematix

Здравствуйте, наконец - то я получил решение с помощью JQuery.

 <!-- Scripts -->
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/MrRio/jsPDF/master/dist/jspdf.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/niklasvh/html2canvas/0.5.0-alpha2/dist/html2canvas.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css" />


<script>
    (function () {
        // Define variables
        var
         form = $('#dvMain'),
         cache_width = form.width(),    
         cache_height = form.height(),
         a4 = [595.28, 841.89]; // for a5 size paper width and height

        if ('@Model.Mode' == "PDF") {
            // Scroll screen
            $('body').scrollTop(0);
            // Call function createPDF
            createPDF();
        }
        //create pdf
        function createPDF() {
            if (cache_height > 600)
                cache_height = 600;

            // Call create canvas function
            getCanvas().then(function (canvas) {
                var
                 img = canvas.toDataURL("image/png"),
                 doc = new jsPDF({
                     unit: 'px',
                     format: 'a4'
                 });
                doc.addImage(img, 'JPEG', 10, 10, 420, cache_height);
                doc.save('techumber-html-to-pdf.pdf');
                form.width(cache_width);
            });
        }

        // create canvas object
        function getCanvas() {
           
            form.width((a4[0] * 1.33333)).css('max-width', 'none');
            return html2canvas(form, {
                imageTimeout: 3000,
                removeContainer: true
            });
        }

    }());

</script>



HTML:
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>
        Reference PDF
    </title>    
</head>
<body>   
    <div class="ui segment">      
        <div id="dvMain" name="dvMain">
            <div class="clr"></div>
            <div class="col-md-12">
                <label>Student Name:</label>  <label id="lblSName" name="lblSName"> @Model.Student</label> <br />
                <label>Date of Brith:</label>  @dob <br /><br />
                <label>Course applied for:</label>  @Model.ApplicationCourses
            </div>
            <div class="col-md-12">
                <br />
                <label>Referee Name:</label>  @Model.Referee <br />
                <label>Position:</label>  @Model.RefereesJobTitle<br />
                <label>Organisation:</label>  @Model.InstitutionName
            </div>
            <div class="clr"></div>
            @if (string.IsNullOrEmpty(Model.ReferenceCompletedDate))
            {
                <div class="col-md-12">
                    <label>Reference Status:</label>  Reference not completed
                </div>
            }
            else
            {
                <div class="col-md-12">
                    <label>Reference Status:</label>  Completed
                </div>
                    <br />
                    <div class="col-md-12">
                        @Html.Raw(Model.HTMLContent)
                    </div>
            }

        </div>
    </div>
</body>
</html>