我正在尝试将 pdf 页面显示为 html 中的图像以进行打印。页面预览遵循210mm x 297mm (w x h) 的打印尺寸。一半页面会填充一些文本（动态显示），另一半页面用于将pdf显示为图像。
我的目标：
我想将 pdf 显示为水平图像（旋转 90 度），其中高度将填充剩余空间的高度（文本之后），并且自动调整宽度以避免拉伸。
有问题的当前工作代码：
请在此处查看此工作示例以查看代码并发出 http://plnkr.co/plunk/DCNH31klqVTycQAD
var receiptFiles = [
"./sample.pdf",
"./60c0d34c7f2e2.pdf"
]
if(receiptFiles.length){
receiptFiles.map((url, pdf_index) => {
var myState = {
pdf: null,
currentPage: 1,
numPages: 0,
zoom: 1
}
pdfjsLib.getDocument(url).then((pdf) => {
myState.pdf = pdf;
numPages = myState.pdf.numPages;
console.log(numPages)
myState.pdf.getPage( 1 ).then(render);
});
function render(page) {
myState.pdf.getPage(myState.currentPage).then((page) => {
var canvas = document.getElementById(`pdf_renderer_${pdf_index}`);
var ctx = canvas.getContext('2d');
var viewport = page.getViewport(1);
console.log(canvas)
var scale = 713 / viewport.width;
viewport = page.getViewport(scale);
canvas.style.width='100%';
canvas.style.height='100%';
canvas.width = canvas.offsetWidth;
canvas.height = viewport.height;
page.render({
canvasContext: ctx,
viewport: viewport
});
document.getElementsByClassName('canvas_container')[0].appendChild( canvas );
});
}
})
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
width: 210mm;
min-height: 297mm;
/*padding: 20mm;*/
padding: 10mm;
margin: 10mm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
height: 257mm;
}
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
}
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
.col-6 { width: 50%; float: left; }
.clear {clear: both;}
.form-group { display: flex; }
.form-group>div:first-child::after {
content: ":";
padding-right: 10px;
}
.img-fluid {
max-width: 100%;
max-height: 200px;
width: auto;
}
.print-btn-wrapper {
position: fixed; bottom: 0; left: 0; right: 0; padding: 15px; border-top: 1px solid #efefef; box-shadow: 0 -2px 6px #00000029; background-color: white;
}
@media print {
.pagebreak {
clear: both;
page-break-after: always;
}
.no-print {
display: none !important;
}
}
</style>
<body>
<div class="print-btn-wrapper no-print">
<div style="width: 210mm;margin: auto;">
<button type="button" class="btn btn-primary" onclick="window.print()"><i class="fa fa-print"></i> Print</button>
</div>
</div>
<div class="page">
<div class="subpage">
<div class="page-info">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p><br />
</div>
<div class="my_pdf_viewer">
<div class="canvas_container">
<canvas id="pdf_renderer_0"></canvas>
</div>
</div>
<div class="my_pdf_viewer">
<div class="canvas_container">
<canvas id="pdf_renderer_1"></canvas>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
</body>
</html>