1、源文件（待转换的html，内容较多）
<html>
<head>
<meta charset="UTF-8">
<title>XXX报告</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.el-table, .el-table td, .el-table th {
box-sizing: border-box;
position: relative
}
.el-table th, .el-table th > div {
white-space: nowrap;
overflow: hidden
}
.el-table {
overflow: hidden;
width: 100%;
max-width: 100%;
background-color: #fff;
border: 1px solid #dfe6ec;
font-size: 14px;
color: #1f2d3d
}
.el-table .el-tooltip.cell {
white-space: nowrap;
min-width: 50px
}
.el-table td, .el-table th {
height: 40px;
min-width: 0;
text-overflow: ellipsis;
vertical-align: middle
}
.el-table::after, .el-table::before {
content: '';
position: absolute;
background-color: #dfe6ec;
z-index: 1
}
.el-table td.is-right, .el-table th.is-right {
text-align: right
}
.el-table td.is-left, .el-table th.is-left {
text-align: left
}
.el-table td.is-center, .el-table th.is-center {
text-align: center
}
.el-table td, .el-table th.is-leaf {
border-bottom: 1px solid #dfe6ec
}
.el-table td.gutter, .el-table th.gutter {
width: 15px;
border-right-width: 0;
border-bottom-width: 0;
padding: 0
}
.el-table .cell, .el-table th > div {
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
text-overflow: ellipsis
}
.el-table::before {
left: 0;
bottom: 0;
width: 100%;
height: 1px
}
.el-table::after {
top: 0;
right: 0;
width: 1px;
height: 100%
}
.el-table .caret-wrapper, .el-table th > .cell {
position: relative;
display: inline-block;
vertical-align: middle
}
.el-table th {
background-color: #eef1f6;
text-align: left
}
.el-table th.is-sortable {
cursor: pointer
}
.el-table th > div {
display: inline-block;
line-height: 40px
}
.el-table td > div {
box-sizing: border-box
}
.el-table th.required > div::before {
display: inline-block;
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #ff4d51;
margin-right: 5px;
vertical-align: middle
}
.el-table th > .cell {
word-wrap: normal;
text-overflow: ellipsis;
line-height: 30px;
width: 100%;
box-sizing: border-box
}
.el-table th > .cell.highlight {
color: #20a0ff
}
.el-table .caret-wrapper {
cursor: pointer;
margin-left: 5px;
margin-top: -2px;
width: 16px;
height: 30px;
overflow: visible;
overflow: initial
}
.el-table .cell, .el-table__footer-wrapper, .el-table__header-wrapper {
overflow: hidden;
}
.el-table .sort-caret {
display: inline-block;
width: 0;
height: 0;
border: 0;
content: "";
position: absolute;
left: 3px;
z-index: 2
}
.el-table .sort-caret.ascending, .el-table .sort-caret.descending {
border-right: 5px solid transparent;
border-left: 5px solid transparent
}
.el-table .sort-caret.ascending {
top: 9px;
border-top: 0;
border-bottom: 5px solid #97a8be
}
.el-table .sort-caret.descending {
bottom: 9px;
border-top: 5px solid #97a8be;
border-bottom: 0
}
.el-table .ascending .sort-caret.ascending {
border-bottom-color: #48576a
}
.el-table .descending .sort-caret.descending {
border-top-color: #48576a
}
.el-table td.gutter {
width: 0
}
.el-table .cell {
white-space: normal;
word-break: break-all;
line-height: 24px;
}
.el-badge__content, .el-message__group p, .el-progress-bar__inner, .el-steps.is-horizontal, .el-tabs__nav, .el-tag, .el-time-spinner, .el-tree-node, .el-upload-list__item-name {
white-space: nowrap
}
.el-table tr input[type=checkbox] {
margin: 0
}
.el-table tr {
background-color: #fff
}
.el-table .hidden-columns {
position: absolute;
z-index: -1
}
.el-table__expand-column .cell {
padding: 0;
text-align: center
}
.el-table__expand-icon > .el-icon {
position: absolute;
left: 50%;
top: 50%;
margin-left: -5px;
margin-top: -5px
}
.el-table--fit {
border-right: 0;
border-bottom: 0
}
.el-table--border th, .el-table__fixed-right-patch {
border-bottom: 1px solid #dfe6ec
}
.el-table--fit td.gutter, .el-table--fit th.gutter {
border-right-width: 1px
}
.el-table--border td, .el-table--border th {
border-right: 1px solid #dfe6ec
}
.el-table__fixed-right .el-table__fixed-body-wrapper, .el-table__fixed-right .el-table__fixed-footer-wrapper, .el-table__fixed-right .el-table__fixed-header-wrapper {
left: auto;
right: 0
}
.el-table__fixed-header-wrapper thead div {
background-color: #eef1f6;
color: #1f2d3d
}
.el-table__fixed-footer-wrapper tbody td {
border-top: 1px solid #dfe6ec;
background-color: #fbfdff;
color: #1f2d3d
}
.el-table__footer-wrapper td {
border-top: 1px solid #dfe6ec
}
.el-table__body, .el-table__footer, .el-table__header {
table-layout: fixed
}
.el-table__footer-wrapper thead div, .el-table__header-wrapper thead div {
background-color: #eef1f6;
color: #1f2d3d
}
.el-table__footer-wrapper tbody td, .el-table__header-wrapper tbody td {
background-color: #fbfdff;
color: #1f2d3d
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
background: #fafafa;
background-clip: padding-box
}
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td {
background: #edf7ff
}
.el-table__body tr.hover-row.current-row > td, .el-table__body tr.hover-row.el-table__row--striped.current-row > td, .el-table__body tr.hover-row.el-table__row--striped > td, .el-table__body tr.hover-row > td {
background-color: #eef1f6
}
.el-table__body tr.current-row > td {
background: #edf7ff
}
.el-table__column-filter-trigger i {
color: #97a8be
}
.el-table--enable-row-transition .el-table__body td {
transition: background-color .25s ease
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #eef1f6;
background-clip: padding-box
}
.el-table--fluid-height .el-table__fixed, .el-table--fluid-height .el-table__fixed-right {
bottom: 0;
overflow: hidden
}
.el-table-column--selection .cell {
padding-left: 14px;
padding-right: 14px
}
.el-table-filter__bottom button {
background: 0;
border: 0;
color: #8391a5;
cursor: pointer;
font-size: 14px;
padding: 0 3px
}
.el-table-filter__bottom button:hover {
color: #20a0ff
}
.el-table-filter__bottom button:focus {
outline: 0
}
.el-table-filter__bottom button.is-disabled {
color: #bfcbd9;
cursor: not-allowed
}
.el-table-filter__checkbox-group label.el-checkbox {
display: block;
margin-bottom: 8px;
margin-left: 5px
}
.el-table-filter__checkbox-group .el-checkbox:last-child {
margin-bottom: 0
}
.box-title {
margin-bottom: 10px;
color: #169BD5;
font-size: 14px;
font-weight: bold;
padding: 10px 0 0px 10px;
}
body td {
font-size: 14px;
}
body th {
font-size: 14px;
}
.el-form-search .el-form-item {
padding-right: 10px;
}
.el-xcalender .el-xcalender__week {
}
.xcalender td.available.el-xcalender-content__weekdays:hover {
background-color: red;
cursor: pointer;
}
.xcalender td.available.el-xcalender-content__holidays:hover {
background-color: #00ff00;
cursor: pointer;
}
.xcalender td.available:hover {
cursor: pointer;
}
.xcalender td {
height: 15px !important;
line-height: 15px !important;
}
.xcalender td.current:not(.disabled), .el-date-table td.start-date, .el-date-table td.end-date {
background-color: transparent;
background-color: initial;
}
.title {
background: rgb(201, 224, 255);
font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", 微软雅黑, "Heiti SC", 黑体-简, "WenQuanYi Micro Hei", sans-serif;
font-size: x-large;
color: rgb(8, 9, 10);
padding: 10px;
position: fixed;
width: 100%;
top: 0px;
z-index: 999;
margin-left: 0%;
}
.el-table_1_column_1{
width: 180px;
}
.el-table_1_column_2{
width: 470px;
}
</style>
</head>
<body>
<div id="testReportDetail" class="div-body">
<div>
<div class="el-row is-align-middle el-row--flex title">
<div class="el-col el-col-10">
<span class="el-tooltip" style="margin-left: 10px; display: block; width: 100%; white-space: nowrap;">测试执行报告: T20220907103008899-wd</span>
</div>
</div>
</div>
<div class="div-content" style="margin-top: 48px;">
<div>
<div class="el-row">
<div class="el-col el-col-6">
<div class="box-title">概况</div>
<div class="el-table el-table--striped el-table--border">
<table cellspacing="0" cellpadding="0" border="0" class="el-table__body">
<div>
<tbody class="el-table__tbody ">
<tr class="el-table__row">
<td rowspan="1" colspan="1" class="el-table_1_column_1 el-table__cell">
<div class="cell">执行任务编号:</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2 el-table__cell">
<div class="cell"><span>T20220907103008899</span></div>
</td>
</tr>
<tr class="el-table__row el-table__row--striped">
<td rowspan="1" colspan="1" class="el-table_1_column_1 el-table__cell">
<div class="cell">执行任务名称:</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2 el-table__cell">
<div class="cell"><span>wd</span></div>
</td>
</tr>
<tr class="el-table__row">
<td rowspan="1" colspan="1" class="el-table_1_column_1 el-table__cell">
<div class="cell">执行结果:</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2 el-table__cell">
<!--1：成功；2：失败；-->
<div class="cell"><span>失败</span></div>
</td>
</tr>
<tr class="el-table__row el-table__row--striped">
<td rowspan="1" colspan="1" class="el-table_1_column_1 el-table__cell">
<div class="cell">环境分组名称:</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2 el-table__cell">
<div class="cell"><span>默认分组</span></div>
</td>
</tr>
<tr class="el-table__row">
<td rowspan="1" colspan="1" class="el-table_1_column_1 el-table__cell">
<div class="cell">一级测试集数:</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2 el-table__cell">
<div class="cell"><span>1</span></div>
</td>
</tr>
<tr class="el-table__row el-table__row--striped">
<td rowspan="1" colspan="1" class="el-table_1_column_1 el-table__cell">
<div class="cell">总测试集数:</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2 el-table__cell">
<div class="cell"><span>1</span></div>
</td>
</tr>
<tr class="el-table__row">
<td rowspan="1" colspan="1" class="el-table_1_column_1 el-table__cell">
<div class="cell">用例总数:</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2 el-table__cell">
<div class="cell"><span>200</span></div>
</td>
</tr>
<tr class="el-table__row el-table__row--striped">
<td rowspan="1" colspan="1" class="el-table_1_column_1 el-table__cell">
<div class="cell">成功用例数:</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2 el-table__cell">
<div class="cell"><span style="color: rgb(0, 153, 102);">0</span></div>
</td>
</tr>
<tr class="el-table__row">
<td rowspan="1" colspan="1" class="el-table_1_column_1 el-table__cell">
<div class="cell">失败用例数:</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2 el-table__cell">
<div class="cell"><span style="color: rgb(255, 0, 0);">200</span></div>
</td>
</tr>
<tr class="el-table__row el-table__row--striped">
<td rowspan="1" colspan="1" class="el-table_1_column_1 el-table__cell">
<div class="cell">未执行用例数:</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2 el-table__cell">
<div class="cell"><span>0</span></div>
</td>
</tr>
<tr class="el-table__row">
<td rowspan="1" colspan="1" class="el-table_1_column_1 el-table__cell">
<div class="cell">用例成功率:</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2 el-table__cell">
<div class="cell">
<span>0%</span>
</div>
</td>
</tr>
<!-- <tr class="el-table__row el-table__row--striped">-->
<!-- <td rowspan="1" colspan="1" class="el-table_1_column_1 el-table__cell">-->
<!-- <div class="cell">缺陷数量:</div>-->
<!-- </td>-->
<!-- <td rowspan="1" colspan="1" class="el-table_1_column_2 el-table__cell">-->
<!-- <div class="cell">-->
<!-- <span th:text="${exeuTask.bugNum}">0</span>-->
<!-- </div>-->
<!-- </td>-->
<!-- </tr>-->
<tr class="el-table__row">
<td rowspan="1" colspan="1" class="el-table_1_column_1 el-table__cell">
<div class="cell">执行者</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2 el-table__cell">
<div class="cell">
<span>phy</span>
</div>
</td>
</tr>
<tr class="el-table__row el-table__row--striped">
<td rowspan="1" colspan="1" class="el-table_1_column_1 el-table__cell">
<div class="cell">开始时间:</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2 el-table__cell">
<div class="cell">
<span>2022-09-07 10:30:08</span>
</div>
</td>
</tr>
<tr class="el-table__row">
<td rowspan="1" colspan="1" class="el-table_1_column_1 el-table__cell">
<div class="cell">结束时间:</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2 el-table__cell">
<div class="cell"><span>2022-09-07 10:30:40</span></div>
</td>
</tr>
<tr class="el-table__row el-table__row--striped">
<td rowspan="1" colspan="1" class="el-table_1_column_1 el-table__cell">
<div class="cell">执行耗时(s):</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2 el-table__cell">
<div class="cell"><span>0.301</span></div>
</td>
</tr>
<tr class="el-table__row">
<td rowspan="1" colspan="1" class="el-table_1_column_1 el-table__cell">
<div class="cell">待测试系统版本号:</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2 el-table__cell">
<div class="cell"><span></span></div>
</td>
</tr>
</tbody>
</div>
<div style="float: right;padding: 2px 15px 0 0;">
<img src="file:/E:/IdeaProjects/autotest/ymit/tmp/3438C3FEC63845BABDFADF3C3BC0CCAA.png" style="height:450px;">
</div>
</table>
</div>
</div>
</div>
</div>
<div class="box-title">XXX执行概览</div>
<div id="testsetChart"
style="height: 340px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
<div style="position: relative; height: 300px; padding: 0px; margin: 0px; border-width: 1px;">
<img src="file:/E:/IdeaProjects/autotest/ymit/tmp/9BCD41D7A8BE4D06B4609D3256364062.png" style="height: 300px;"/>
</div>
</div>
<div class="el-table el-table--border el-table--enable-row-transition">
<table cellspacing="0" cellpadding="0" border="0" class="el-table__header">
<thead class="el-table__thead">
<tr class="el-table__row">
<th colspan="1" rowspan="1" class="is-center">
<div class="cell" style="width: 50px;">序号</div>
</th>
<th colspan="1" rowspan="1" style="cursor: pointer;">
<div class="cell" style="width: 467px;">测试集名称</div>
</th>
<th colspan="1" rowspan="1" class="is-center">
<div class="cell" style="width: 79px;">批次号</div>
</th>
<th colspan="1" rowspan="1" class="is-center">
<div class="cell" style="width: 79px;">用例数</div>
</th>
<th colspan="1" rowspan="1" class="is-center">
<div class="cell" style="width: 79px;">成功</div>
</th>
<th colspan="1" rowspan="1" class="is-center">
<div class="cell" style="width: 79px;">失败</div>
</th>
<th colspan="1" rowspan="1" class="is-center">
<div class="cell" style="width: 79px;">未执行</div>
</th>
<!-- <th colspan="1" rowspan="1" class="is-center">
<div class="cell" style="width: 89px;">缺陷编号</div>
</th>-->
<th colspan="1" rowspan="1" class="is-center">
<div class="cell" style="width: 89px;">执行方式</div>
</th>
<th colspan="1" rowspan="1" class="is-center">
<div class="cell" style="width: 89px;">执行结果</div>
</th>
<th colspan="1" rowspan="1" class=" is-center">
<div class="cell" style="width: 90px;">执行者</div>
</th>
<th colspan="1" rowspan="1" class="is-center">
<div class="cell" style="width: 165px;">开始时间</div>
</th>
<th colspan="1" rowspan="1">
<div class="cell" style="width: 550px;">测试集路径</div>
</th>
</tr>
</thead>
<tbody class="el-table__tbody">
<tr class="el-table__row">
<td rowspan="1" colspan="1" class="is-center el-table__cell">
<div class="cell">
<div>1</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table__cell">
<div class="cell el-tooltip"><span style="color: rgb(32, 160, 255);">wd</span></div>
</td>
<td rowspan="1" colspan="1" class="el-table__cell">
<div class="cell">1</div>
</td>
<td rowspan="1" colspan="1" class="el-table__cell">
<div class="cell">200</div>
</td>
<td rowspan="1" colspan="1" class="el-table__cell">
<div class="cell">0</div>
</td>
<td rowspan="1" colspan="1" class="el-table__cell">
<div class="cell">200</div>
</td>
<td rowspan="1" colspan="1" class="el-table__cell">
<div class="cell">0</div>
</td>
<!--<td rowspan="1" colspan="1" class="el-table__cell">
<div class="cell" th:text="${item.bugIdStr}"></div>
</td>-->
<td rowspan="1" colspan="1" class="el-table__cell">
<div class="cell">立即执行</div>
</td>
<td rowspan="1" colspan="1" class="el-table__cell">
<div class="cell">出错终止</div>
</td>
<td rowspan="1" colspan="1" class="el-table__cell">
<div class="cell">phy</div>
</td>
<td rowspan="1" colspan="1" class="el-table__cell">
<div class="cell">2022-09-07 10:30:09</div>
</td>
<td rowspan="1" colspan="1" class="el-table__cell">
<div class="cell">测试验证2021/wd</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>2、配置文件url2pdf.js
var page = require('webpage').create(),
system = require('system'),
address, output, size;
if (system.args.length < 2 || system.args.length > 5) {
console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
console.log(' paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
phantom.exit(1);
} else {
address = system.args[1];
output = system.args[2];
console.log(address);
page.viewportSize = { width: 1920, height: 1080 };
page.settings.userAgent = 'Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36';
page.paperSize = { format: 'A1', orientation: 'portrait', margin: '1.2cm' };
page.zoomFactor = 1;
page.settings.loadImages = true;
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address:'+status);
phantom.exit();
} else {
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 200);
}
});
}
3、命令行方式本地调试（Windows命令行下演示，需要插件程序、js配置文件、源html文件）
# >phantomjs.exe url2pdf.js 源html路径 目标pdf路径
>phantomjs.exe url2pdf.js aa.html test.pdf
# >phantomjs.exe url2pdf.js 源地址路劲 目标pdf路径
>phantomjs.exe url2pdf.js http://www.baidu.com test.pdf4、生成pdf预览
5、注意事项
- 手动添加分页，在html中需要分页地方根据需要添加如下标签即可
<!--page-break-befor page-break-after 这两个属性是用来控制文件的打印方式 -->
<!-- auto 默认值只有在有需要时，才需设定分页符号-->
<!-- left 则会插入分页符号，直到指定的组件出现在一个左边的空白页上-->
<!-- right 则会插入分页符号，直到指定的组件出现在一个右边的空白页上-->
<!-- always 则是在遇到特定的组件时，打印机会重新开始一个新的打印页-->
<div style="page-break-before:always">始终在对象之前插入页分割符</div>
<div style="page-break-after:always">始终在对象之后插入页分割符</div>
<div>This is the fourth div.</div>
<div style="page-break-before:right">This is the fifth div.</div>
<div style="page-break-after:right">This is the sixth div.</div>
- 内容超长时只生成一页PDF，可能是样式影响自动分
html, body {
width:100%;
height: 100%;
background-color:white;
margin:0px;
padding: 0px;
/* 该样式导致内容过多不会分页，注释即可
overflow-y: auto;
overflow-x: auto;
*/
}
649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
