手机和电脑打印页面不同

一尘不染

手机和电脑打印页面不同

javascript

我有一个页面来检查用户。但是，从手机打印时，页面会有所不同。

看图：

https://i.stack.imgur.com/SjXoU.jpg

 @page {
        size: A4;
        margin: 0;
        background-color: #F7CAC9;
    }

    @media print {
        #hid {
            display: none;
        }
 }

我希望页面在移动设备上更小有解决方案吗？

阅读 100

2022-07-23

共1个答案

一尘不染

您好，这一定是编码错误，如果您与其中的 css 共享代码，它将更容易调试但是，确保您有正确的 CSS 用于打印通常很棘手。可以做几件事来避免你遇到的困难。首先，将所有打印 CSS 与屏幕 CSS 分开。这是通过@media printand完成的@media screen。

很多时候，仅仅设置一些额外的@media printCSS 是不够的，因为在打印时您仍然包含所有其他 CSS。在这些情况下，您只需要注意 CSS 的特殊性，因为打印规则不会自动战胜非打印 CSS 规则。您可以使用一些 js 库将 html 转换为 pdf，如下所示，希望您发现这个答案有帮助

HTML 代码：

<div id="content">
    <!-- HTML contnet goes here -->
</div>

<div id="elementH"></div>

JavaScript 代码：

var doc = new jsPDF();
var elementHTML = $('#contnet').html();
var specialElementHandlers = {
    '#elementH': function (element, renderer) {
        return true;
    }
};
doc.fromHTML(elementHTML, 15, 15, {
    'width': 170,
    'elementHandlers': specialElementHandlers
});

// Save the PDF
doc.save('sample-document.pdf');

2022-07-23