报告生成为 HTML 视图，可以按原样打印吗？

Question

在我的应用程序中，我想以更时尚的方式生成最终报告，目前我曾经在 HTML/CSS 视图中显示报告。

然后我想尝试打印，但当它打印时，它带有基本视图（比如没有表格、数据排列不正确等）。所以我想知道是否可以将此视图发送到视图中显示的打印件？

我找到了一个 javascript 用于打印动作，这是我用来打印的。

<script type="text/javascript">

    function PrintElem(elem) {
        Popup($(elem).html());
    }

    function Popup(data) {
        var mywindow = window.open('', 'divprint', 'height=400,width=600');
        mywindow.document.write('<html><head><title></title>');
        /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
        mywindow.document.write('</head><body >');
        mywindow.document.write(data);
        mywindow.document.write('</body></html>');

        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10

        mywindow.print();
        mywindow.close();

        return true;
    }

</script>

或者当用户点击打印然后打开该 pdf 进行打印时，有没有办法将其转换为 pdf？我也想在生成时将此视图设置为A4大小。

这就是我现在的视图。谢谢

Answer 1

将此库添加到您的项目中，下载 link: https://ekoopmans.github.io/html2pdf.js/

HTML代码：

<div id="dPDF">
   Your all html here which you want to print
</div>

<div class="generate-pdf" onclick="downloadPDF()">
    Generate PDF (Button for generating pdf)
</div>

生成PDF的函数：

function downloadPDF() {
        const element = document.getElementById("dPDF");

        var opt = {
            margin: 0.5,
            filename: 'your_filename.pdf',
            image: { type: 'jpeg', quality: 1 },
            html2canvas: { scale: 4, logging: true },
            jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
        };

        html2pdf().set(opt).from(element).save();
    }

注意：通过生成和下载 pdf，您可以打印出您想要的确切视图。

报告生成为 HTML 视图，可以按原样打印吗？

Report generated as HTML view, Can print as it is?

javascript

html

asp.net-mvc

asp.net-mvc-4