如何解决使用 .print() 从 html 创建下载多页 pdf
我正在通过使用 json 获取的一些数据创建一些书籍，我创建了一个 html 页面来设置打印布局，但我需要导出它，但不是通过打印机面板我已经创建了第二页 (printPdfBook.html ) 就像打印 html 文件 (printBook.html)，具有相同的设置。我尝试了一些库，如 jsPDF、html2canvas，但是当我单击下载按钮时，css 设置丢失了，或者我必须为每本书创建一个单独的设置，但我不能。 我写过我会使用 .print() 但欢迎任何有用的想法。 有人能帮我吗？ 提前感谢大家。 附上我用于打印html文件的表格结构。
<section id="bookCover" class="sheet">
<table class="coverPage">
<thead class="coverHead">
<tr class="coverlogoSpace">
<th class="coverlogo">
<img class="coverlogoImg" src="/padova/img/logo2.png"/>
</th>
</tr>
</thead>
<tbody class="coverBody">
<tr class="coverBodyTitle">
<th class="coverTitle">
{{mod.name}}
</th>
<th class="coverBookTitle">
{{title}}
</th>
</tr>
</tbody>
<tfoot>
<tr class="featuresCol">
{{#with mod}}
{{#each features}}
{{#if value}}
<td class="featureNameSpace">{{name}}</td>
{{/if}}
{{/each}}
{{/with}}
</tr>
<tr class="featureNamesCol">
{{#with mod}}
{{#each features}}
{{#if value}}
<td class="featureValueSpace">{{value}}</td>
{{/if}}
{{/each}}
{{/with}}
</tr>
<tr>
<td class="footerInfo"></td>
</tr>
</tfoot>
</table>
</section>
{{#each pages}}
<section class="sheet">
<table class="snglImgTable">
<tbody class="snglImgBody">
<tr class="snglImgCol">
{{#with picture}}
<th class="snglImg{{ifW w h}}">
<img class="snglImgDetail {{ifW w h}}" src="{{url}}"/>
</th>
{{/with}}
</tr>
</tbody>
</table>
{{/each}}
</section>
#buffering{
display: block;
width: 100%;
margin:0px;
padding:0px;
}
.bufferingGif{
width: 50px;
float: left;
margin-left: calc(50% - 25px);
margin-right: calc(50% - 25px);
margin-top: 350px;
}
.bufferingText{
width: 250px;
float: left;
margin-top: 15px;
margin-left: calc(50% - 125px);
margin-right: calc(50% - 125px);
font-size: 1em;
color: rgb(80,80,80);
text-align: center;
font-family: 'Mulish',sans-serif;
}
#contentItem{
opacity: 0;
}
@media print{
html{
width: 210mm;
margin:0mm;
padding: 0mm;
}
body{
width: 210mm;
padding: 0mm;
margin: 0mm;
}
#buffering{
display: none;
}
#contentItem {
opacity: 1;
width: 210mm;
height: 297mm;
margin: 0mm;
padding: 0mm;
}
table{
width: 210mm;
padding: 0mm;
margin: 0mm;
}
.coverPage{
width: 210mm;
padding: 0mm;
margin: 0mm;
}
.coverHead{
width:210mm;
margin:0mm;
padding:0mm;
}
.coverlogoSpace{
width:210mm;
margin:0mm;
padding:0mm;
}
.coverlogo{
display: block;
width: 50mm;
margin-right:80mm;
margin-left:80mm;
margin-top: 30mm;
}
.coverlogoImg{
width: 100%;
margin: 0mm;
padding: 0mm;
}
/*body cover*/
.coverBody{
width:210mm;
margin:0mm;
padding:0mm;
}
.coverBodyTitle{
display: block;
width:100mm;
margin-left: 55mm;
margin.right: 55mm;
margin-top: 80mm;
}
.coverTitle{
display: block;
font-size: 30pt;
font-family: 'Mulish',sans-serif;
text-align: center;
text-transform: uppercase;
color:black;
font-weight: normal;
opacity: 0.8;
border-bottom: 0.5mm solid black;
}
.coverBookTitle{
display: block;
font-size: 12pt;
font-family: 'Mulish',sans-serif;
text-align: center;
text-transform: uppercase;
color:black;
font-weight: normal;
opacity: 0.4;
}
.featuresCol{
display: block;
width: 140mm;
padding: 0mm;
margin-right: 35mm;
margin-left: 35mm;
margin-bottom: 0mm;
margin-top: 120mm;
text-align: center;
}
.featureNamesCol{
display: block;
width: 140mm;
padding: 0mm;
margin-right: 35mm;
margin-left: 35mm;
margin-bottom: 0mm;
text-align: center;
}
.featureNameSpace{
width:20mm;
margin:0mm;
padding:0mm;
font-family: 'Mulish',sans-serif;
font-size: 10pt;
text-transform: uppercase;
opacity: 0.6;
}
.featureValueSpace{
width:20mm;
margin:0mm;
padding:0mm;
font-family: 'Mulish',sans-serif;
font-size: 10pt;
opacity: 0.8;
}
.footerInfo{
display: block;
width:190mm;
margin-left:10mm;
margin-right:10mm;
margin-bottom: 10mm;
font-size: 8pt;
color: black;
opacity: 0.6;
margin-top: 3mm;
text-align: center;
font-family: 'Mulish',sans-serif;
font-weight: normal;
}
/* pagine book */
.snglImgTable{
width: 210mm;
height: 297mm;
margin:0mm;
padding:0mm;
display: block;
overflow: hidden;
}
.snglImgBody{
width: 200mm;
height: 287mm;
margin:5mm;
padding:0mm;
display: block;
overflow: hidden;
}
.snglImgCol{
width: 100%;
height: 100%;
margin:0mm;
padding:0mm;
display: block;
overflow: hidden;
}
.snglImgverticalBasedImg{
height: 287mm;
width:200mm;
margin: 0mm;
overflow: hidden;
display: table-cell;
vertical-align: middle;
}
.snglImghorizzontalBasedImg{
width: 200mm;
height: 141mm;
margin: 0mm;
margin-top: 78mm;
margin-bottom:78mm;
overflow: hidden;
display: block;
}
.snglImgsquareBasedImg{
width: 200mm;
height: 200mm;
margin: 0mm;
margin-top: 48.5mm;
margin-bottom:48.5mm;
overflow: hidden;
display: block;
}
.verticalBasedImg{
width: 200mm;
overflow: hidden;
display: block;
display: table-cell;
}
img.verticalBasedImg{
vertical-align: middle;
}
.horizzontalBasedImg{
width:200mm;
height: auto;
}
.squareBasedImg{
width:200mm;
overflow: hidden;
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
