问题描述
我有一个页面来检查用户。 但是,从手机打印时,页面是不同的。
看图: in Desktop in mobile
[
[ name: "Martin",age: 49 ],[ name: "Klaas",age: 39 ],[ name: "Piet",[ name: "Henk",age: 44 ]
}
}
解决方法
您可以使用特定于设备的@media 标签并在该 css 块中应用任何宽度/高度/显示等 css 选项。
/* On screens that are 600px or less,*/
@media screen and (max-width: 600px) {
#hid {
width: VALUE HERE;
max-width: VALUE HERE;
display: VALUE HERE;
}
}
更改值以支持您的需求。
,您可以为不同的页面大小定义不同的样式。您需要为移动设备指定所需的页面大小。
/* style sheet for "A4" printing */
@media print and (width: 21cm) and (height: 29.7cm) {
@page {
margin: 3cm;
}
}
/* style sheet for "letter" printing */
@media print and (width: 8.5in) and (height: 11in) {
@page {
margin: 1in;
}
}
参考: https://www.w3.org/TR/css-page-3/#page-size-media-query
,您好,这一定是编码错误,如果您与 css 共享代码,则调试起来会更容易。但是,确保使用正确的 CSS 进行打印通常会很棘手。可以做几件事来避免您遇到的困难。首先,将所有打印 CSS 与屏幕 CSS 分开。这是通过 @media print
和 @media screen
完成的。
通常,仅仅设置一些额外的 @media print
CSS 是不够的,因为在打印时您仍然包含所有其他 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,{
'width': 170,'elementHandlers': specialElementHandlers
});
// Save the PDF
doc.save('sample-document.pdf');