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

【问题标题】：Report generated as HTML view, Can print as it is?生成为 HTML 视图的报告，可以按原样打印吗？
【发布时间】：2021-12-15 00:48:57
【问题描述】：

在我的应用程序中，我想以更时尚的方式生成最终报告，目前我使用 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 大小。

这就是我现在的看法。谢谢

【问题讨论】：

你试过html2pdf吗？
@AlexYu 不。是插件吗？

标签： javascript html asp.net-mvc asp.net-mvc-4

【解决方案1】：

将此库添加到您的项目中，下载链接：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，您可以打印所需的确切视图。

【讨论】：

感谢您的帮助。我试过了，它奏效了。 :)
欢迎兄弟。