Question

如何在pdf页面上而不是在html页面上添加图像？我只想在pdf页面上添加一个小徽标，图像不会在html页面版本上显示，而仅在pdf版本上可见

我尝试使用css visible：hidden或display：none将其隐藏在html页面上，但是如果在html页面上不显示，则转换后将不会在pdf上显示

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
<style>
body{color: #000; font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 18px}
h1{color: red; font-size: 50px; font-weight: 500}
.hidden{display: none}
.bgred{background: red}
.bggreen{background: green}
</style>
<button id="generate">Create PDF</button>
<div id="element-to-print">
<h1> h1 header</h1>
<div class="hidden bggreen"> this section hidden on the html page but visibale on pdf page </div>
Element to print. <a href="#">link</a>
<div class="bgred">some text</div>
<ul>
<li>text</li>
<li>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <a href="#">link</a> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </li>
<li>text</li>
<li>text</li>
</ul>
<a href="#">link</a> </div>
<script src="html2pdf.bundle.min.js"></script> 
<script>
document.getElementById('generate').onclick = function () {
// Your html2pdf code here.
var element = document.getElementById('element-to-print');
/*html2pdf(element);*/
html2pdf(element, {
margin: 1,
filename: 'myfile.pdf',
image: {type: 'jpeg', quality: 1},
//html2canvas: {scale: 2, logging: true},
    html2canvas: {scale: 2, dpi: 600, letterRendering: true, useCORS: true},
jsPDF: {unit: 'in', format: 'a4', orientation: 'l'}
});

};

document.getElementById('generateCanvas').onclick = function () {
var element = document.getElementById('element-to-print');
html2canvas(element).then(function (canvas) {
document.body.appendChild(canvas);
});
};

</script>
</body>
</html>

如何在pdf页面上而不是在html页面上添加图像？

0 个答案: