Как добавить изображение на странице PDF, но не на странице HTML? - PullRequest
Новая
       16

Как добавить изображение на странице PDF, но не на странице HTML?

0 голосов
/ 21 июня 2019

как добавить изображение на странице pdf, но не на странице html? Я хочу добавить небольшой логотип только на странице PDF, изображение не будет отображаться на версии HTML-страницы, видимой только в версии PDF

Я пытался использовать css visible: скрытый или отображаемый: нет, чтобы скрыть его на 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>
...