window.print()를 사용하여 HTML에서 PDF를 만드는 트리거 브라우저 방법
7377 단어 javascriptwebdev
window.print() 및 일부 특정 CSS를 활용할 것입니다.불행히도 모바일 브라우저에서는 작동하지 않습니다(의견에서 지적한 대로).
window.print() 함수에 필요한 스타일:* {
font-family: Arial, Helvetica, sans-serif;
color: rgb(65, 65, 65);
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
print-color-adjust: exact !important;
}
@media print {
@page {
margin-left: 0.8in;
margin-right: 0.8in;
margin-top: 0;
margin-bottom: 0;
}
}
#container {
width: 800px;
margin: 0 auto;
}
물론
font-family , color 및 #container 에 대해 다른 값을 설정할 수 있습니다. 사용자 지정 PDF에 대한 나머지 스타일을 추가합니다.다음으로 브라우저 고유의
window.print() 함수를 트리거해야 합니다. 따라서 script 태그에 js 아래를 추가하십시오.document.addEventListener("DOMContentLoaded", () => {
let printLink = document.getElementById("print");
let container = document.getElementById("container");
printLink.addEventListener("click", event => {
event.preventDefault();
printLink.style.display = "none";
window.print();
}, false);
container.addEventListener("click", event => {
printLink.style.display = "flex";
}, false);
}, false);
기본 HTML은 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Add here the styles and script we described up -->
<title>This will be the title of the pdf file</title>
</head>
<body id="container">
<a href="#" id="print">GENERATE PDF!</a>
<h1>Super cool custom pdf</h1>
<p>This pdf is generated from the client side without any external libraries!</p>
</body>
</html>
그리고 그게 다야!
다음은 우리가 수행한 작업의 작동 방식입니다.
Reference
이 문제에 관하여(window.print()를 사용하여 HTML에서 PDF를 만드는 트리거 브라우저 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/climentea/simple-way-to-generate-pdf-from-html-21mh텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
