Javascript를 사용하여 div의 HTML에서 pdf 생성
다음과 같은 HTML 코드를 가지고 있습니다.
<!DOCTYPE html>
<html>
<body>
<p>don't print this to pdf</p>
<div id="pdf">
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
div에 있는 ID가 "pdf"인 것을 pdf로 출력하기만 하면 됩니다.이 작업은 JavaScript를 사용하여 수행해야 합니다.그런 다음 "pdf" 문서가 "foobar.pdf" 파일 이름으로 자동으로 다운로드됩니다.
이 작업을 위해 jspdf를 사용했는데 문자열 값만 받아들이는 "text" 함수밖에 없습니다.HTML을 텍스트가 아닌 jspdf로 제출하고 싶습니다.
jsPDF는 플러그인을 사용할 수 있습니다.HTML 의 인쇄를 유효하게 하려면 , 특정의 플러그 인을 포함할 필요가 있기 때문에, 다음의 조작을 실시할 필요가 있습니다.
- https://github.com/MrRio/jsPDF에 접속하여 최신 버전을 다운로드하십시오.
- 프로젝트에 다음 스크립트를 포함합니다.
- jspdf.syslog
- jspdf.dev.dev.dev.dev.dev.from_disc.discloss.discloss
- jspdf.disc.disc_text_to_size.disc.disc.
- jspdf.disc.standard_disc_disc.discs
특정 요소를 무시하려면 ID로 표시해야 합니다.이 ID는 jsPDF의 특수 요소 핸들러에서 무시할 수 있습니다.따라서 HTML은 다음과 같습니다.
<!DOCTYPE html>
<html>
<body>
<p id="ignorePDF">don't print this to pdf</p>
<div>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
그런 다음 다음 JavaScript 코드를 사용하여 생성된 PDF를 PopUp에서 엽니다.
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
이것은, 「print this to pdf」라고 하는 행만을 포함한, 깔끔한 PDF 를 작성했습니다.
특수 요소 핸들러는 GitHub Issue에도 기재되어 있는 현재 버전의 ID만을 취급하고 있습니다.다음과 같이 기술되어 있습니다.
노드 트리의 모든 요소에 대해 매칭이 이루어지기 때문에 가능한 한 빨리 매칭하고 싶었습니다.이 경우 요소 ID만 일치함을 의미합니다. 요소 ID는 여전히 jQuery 스타일 "#id"로 수행되지만 모든 jQuery 실렉터가 지원되는 것은 아닙니다.
따라서 '#무시'를 대체한다.'.ignore'와 같은 클래스 셀렉터가 포함된 PDF'PDF'는 나에게 효과가 없었다.대신 각 요소에 대해 동일한 핸들러를 추가해야 합니다.이 핸들러는 다음과 같이 무시해야 합니다.
var elementHandler = {
'#ignoreElement': function (element, renderer) {
return true;
},
'#anotherIdToBeIgnored': function (element, renderer) {
return true;
}
};
이 예에서 'a' 또는 'li'와 같은 태그를 선택할 수도 있다고 명시되어 있습니다.그러나 대부분의 사용 사례에는 다소 제한이 없습니다.
특수 요소 핸들러를 지원합니다.ID 또는 노드 이름의 jQuery 스타일 ID 셀렉터에 등록합니다("#iAm).ID", "div", "span" 등)현재 다른 유형의 셀렉터(클래스, 화합물)는 지원되지 않습니다.
덧붙여야 할 중요한 것은 스타일 정보(CSS)가 모두 손실된다는 것입니다.다행히 JSPDF는 h1, h2, h3 등을 잘 포맷할 수 있어 제 목적에 충분했습니다.또한 텍스트 노드 내에서만 텍스트가 인쇄되므로 텍스트 영역 등의 값은 인쇄되지 않습니다.예:
<body>
<ul>
<!-- This is printed as the element contains a textnode -->
<li>Print me!</li>
</ul>
<div>
<!-- This is not printed because jsPDF doesn't deal with the value attribute -->
<input type="textarea" value="Please print me, too!">
</div>
</body>
이것이 간단한 해결책입니다.난 이거면 돼.javascript print 컨셉을 사용하여 pdf로 저장할 수 있습니다.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#btnPrint").live("click", function () {
var divContents = $("#dvContainer").html();
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>DIV Contents</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
});
</script>
</head>
<body>
<form id="form1">
<div id="dvContainer">
This content needs to be printed.
</div>
<input type="button" value="Print Div Contents" id="btnPrint" />
</form>
</body>
</html>
- 디펜시(depenency)
- CSS 하려면 , 을 .URL 의 풀 을 합니다.
http://...domain.../path.cssHTML 문서를 따로 만들고 주요 내용을 담고 있지 않습니다. - 이미지를 base64로 삽입할 수도 있습니다.
몇 년 동안이나 도움이 되었습니다.
export default function printDiv({divId, title}) {
let mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');
mywindow.document.write(`<html><head><title>${title}</title>`);
mywindow.document.write('</head><body >');
mywindow.document.write(document.getElementById(divId).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}
물론 인쇄 대화상자가 열리고 사용자가 PDF로 인쇄 옵션을 선택할 수 있다는 것을 알아야 PDF를 통해 PDF를 얻을 수 있습니다.프린터가 미리 선택되어 있는 경우가 있습니다.사용자가 확인하면 이 문서가 실제로 인쇄될 수 있습니다.이러한 상황을 피하고 PDF를 추가 없이 제공하려면 PDF 파일을 만들어야 합니다.아마 서버 쪽일 거예요.청구서만 있는 작은 html 페이지를 가지고 헤드리스 크롬을 사용한 PDF 파일로 변환할 수 있습니다.인형사라면 아주 쉬워요.크롬을 설치/구성할 필요 없이 npm 패키지 puppeteer(chrome 팀에서 관리)를 설치하여 실행하면 됩니다.이것은 실제로 GUI를 사용하지 않고 실제 크롬을 기동하기 때문에 RAM과 CPU를 탑재되어 있어야 합니다.대부분의 서버는 트래픽이 충분히 적어도 문제가 없습니다.다음은 코드 샘플이지만 BEND에서 실행해야 합니다.노드또, 슬로우 콜이며, 자원을 많이 소비하는 콜입니다.API 호출이 아닌 청구서 작성 후 실행해야 합니다.예를 들어 pdf를 생성하여 아직 pdf가 생성되지 않았다면 몇 분 후에 다시 시도하라는 메시지를 표시합니다.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://your-domain.com/path-to-invoice', {
waitUntil: 'networkidle2',
});
await page.pdf({ path: 'invoice-file-path.pdf', format: 'a4' });
await browser.close();
})();
특정 페이지의 pdf를 다운로드하려면 다음과 같이 추가 버튼을 클릭하십시오.
<h4 onclick="window.print();"> Print </h4>
window.print()를 사용하여 div뿐만 아니라 모든 페이지를 인쇄합니다.
autoPrint()를 사용하여 다음과 같이 출력을 'dataurl new window'로 설정할 수 있습니다.
function printPDF() {
var printDoc = new jsPDF();
printDoc.fromHTML($('#pdf').get(0), 10, 10, {'width': 180});
printDoc.autoPrint();
printDoc.output("dataurlnewwindow"); // this opens a new popup, after this the PDF opens the print window view but there are browser inconsistencies with how this is handled
}
이미 설명한 바와 같이 jsPDF와 html2canvas를 사용해야 합니다.또, jsPDF 의 문제내에서, PDF 를 자동적으로 복수의 페이지(소스)로 분할하는 기능도 발견했습니다.
function makePDF() {
var quotes = document.getElementById('container-fluid');
html2canvas(quotes, {
onrendered: function(canvas) {
//! MAKE YOUR PDF
var pdf = new jsPDF('p', 'pt', 'letter');
for (var i = 0; i <= quotes.clientHeight/980; i++) {
//! This is all just html2canvas stuff
var srcImg = canvas;
var sX = 0;
var sY = 980*i; // start 980 pixels down for every new page
var sWidth = 900;
var sHeight = 980;
var dX = 0;
var dY = 0;
var dWidth = 900;
var dHeight = 980;
window.onePageCanvas = document.createElement("canvas");
onePageCanvas.setAttribute('width', 900);
onePageCanvas.setAttribute('height', 980);
var ctx = onePageCanvas.getContext('2d');
// details on this usage of this function:
// https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);
// document.body.appendChild(canvas);
var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);
var width = onePageCanvas.width;
var height = onePageCanvas.clientHeight;
//! If we're on anything other than the first page,
// add another page
if (i > 0) {
pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)
}
//! now we declare that we're working on that page
pdf.setPage(i+1);
//! now we add content to that page!
pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));
}
//! after the for loop is finished running, we save the pdf.
pdf.save('test.pdf');
}
});
}
css 렌더링을 위해 jspdf와 html2gl을 사용하고 이것이 내 코드이기 때문에 특정 div의 콘텐츠를 내보냅니다.
$(document).ready(function () {
let btn=$('#c-oreder-preview');
btn.text('download');
btn.on('click',()=> {
$('#c-invoice').modal('show');
setTimeout(function () {
html2canvas(document.querySelector("#c-print")).then(canvas => {
//$("#previewBeforeDownload").html(canvas);
var imgData = canvas.toDataURL("image/jpeg",1);
var pdf = new jsPDF("p", "mm", "a4");
var pageWidth = pdf.internal.pageSize.getWidth();
var pageHeight = pdf.internal.pageSize.getHeight();
var imageWidth = canvas.width;
var imageHeight = canvas.height;
var ratio = imageWidth/imageHeight >= pageWidth/pageHeight ? pageWidth/imageWidth : pageHeight/imageHeight;
//pdf = new jsPDF(this.state.orientation, undefined, format);
pdf.addImage(imgData, 'JPEG', 0, 0, imageWidth * ratio, imageHeight * ratio);
pdf.save("invoice.pdf");
//$("#previewBeforeDownload").hide();
$('#c-invoice').modal('hide');
});
},500);
});
});
한 가지 방법은 window.print() 함수를 사용하는 것입니다.라이브러리가 필요 없습니다.
장점
1. 외부 라이브러리는 필요 없습니다.
2. 본체의 일부만 인쇄할 수 있습니다.
3. css의 경합이나 js의 문제는 없습니다.
4. html/js의 핵심 기능
---아래의 코드를 간단하게 추가해 주세요.
CSS 대상
@media print {
body * {
visibility: hidden; // part to hide at the time of print
-webkit-print-color-adjust: exact !important; // not necessary use
if colors not visible
}
#printBtn {
visibility: hidden !important; // To hide
}
#page-wrapper * {
visibility: visible; // Print only required part
text-align: left;
-webkit-print-color-adjust: exact !important;
}
}
JS 코드 - btn 클릭 시 bewlow 함수 호출
$scope.printWindow = function () {
window.print()
}
주의: 모든 css 오브젝트에 !important를 사용합니다.
예 -
.legend {
background: #9DD2E2 !important;
}
pdfMake.js 및 이 Gist를 사용합니다.
(여기서 Gist와 함께 html-to-pdfmake 패키지에 대한 링크를 찾았는데, 현재는 사용하지 않습니다.)
★★★ npm install pdfmake를 GIST에 합니다.htmlToPdf.js이렇게 씁니다.
const pdfMakeX = require('pdfmake/build/pdfmake.js');
const pdfFontsX = require('pdfmake-unicode/dist/pdfmake-unicode.js');
pdfMakeX.vfs = pdfFontsX.pdfMake.vfs;
import * as pdfMake from 'pdfmake/build/pdfmake';
import htmlToPdf from './htmlToPdf.js';
var docDef = htmlToPdf(`<b>Sample</b>`);
pdfMake.createPdf({content:docDef}).download('sample.pdf');
비고:
- 사용 예로는 마크다운 문서(markdown-it)에서 관련 html을 작성한 후 pdf를 생성하여 바이너리 콘텐츠를 업로드하는 것입니다(이것에 의해 취득할 수 있습니다).
pdfMake의 »getBuffer()기능)을 모두 브라우저로부터 액세스 합니다.생성된 pdf는 제가 시도했던 다른 솔루션보다 이런 종류의 html이 더 좋은 것으로 나타났습니다. - 에서 얻은 결과에 불만이다.
jsPDF.fromHTML()이 되기 때문에 된 답변에서되었습니다. - 솔루션 되지 않은 솔루션 등)
jsPDF.from_html()생성된 PDF의 텍스트를 붙여넣을 수 있는 반면 캔버스 기반 솔루션은 비트맵 기반 PDF를 생성하기 때문에 이 기능은 사용할 수 없습니다. - md-to-pdf 등의 pdf 변환기로의 직접 마크 다운은 서버측에서만 사용할 수 있으며, 저는 사용할 수 없습니다.
- 생성된 PDF를 표시하지 않고 바이너리 콘텐츠를 업로드하고 싶기 때문에 브라우저의 인쇄 기능을 사용할 수 없습니다.
div에서 동적으로 작성된 표를 인쇄하기 위해 jsPDF를 얻을 수 있었습니다.
$(document).ready(function() {
$("#pdfDiv").click(function() {
var pdf = new jsPDF('p','pt','letter');
var specialElementHandlers = {
'#rentalListCan': function (element, renderer) {
return true;
}
};
pdf.addHTML($('#rentalListCan').first(), function() {
pdf.save("caravan.pdf");
});
});
});
Chrome 및 Firefox에서 작동 가능...IE에서는 포맷이 모두 확대되어 있습니다.
다음 내용도 포함했습니다.
<script src="js/jspdf.js"></script>
<script src="js/jspdf.plugin.from_html.js"></script>
<script src="js/jspdf.plugin.addhtml.js"></script>
<script src="//mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="./libs/Blob.js/Blob.js"></script>
<script type="text/javascript" src="./libs/deflate.js"></script>
<script type="text/javascript" src="./libs/adler32cs.js/adler32cs.js"></script>
<script type="text/javascript" src="js/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="js/jspdf.plugin.sillysvgrenderer.js"></script>
<script type="text/javascript" src="js/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="js/jspdf.plugin.standard_fonts_metrics.js"></script>
테이블을 내보내려면 Shield UI 그리드 위젯에서 제공하는 이 내보내기 샘플을 볼 수 있습니다.
설정을 다음과 같이 확장하면 됩니다.
...
exportOptions: {
proxy: "/filesaver/save",
pdf: {
fileName: "shieldui-export",
author: "John Smith",
dataSource: {
data: gridData
},
readDataSource: true,
header: {
cells: [
{ field: "id", title: "ID", width: 50 },
{ field: "name", title: "Person Name", width: 100 },
{ field: "company", title: "Company Name", width: 100 },
{ field: "email", title: "Email Address" }
]
}
}
}
...
이 예는 매우 효과적입니다.
<button onclick="genPDF()">Generate PDF</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
function genPDF() {
var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage();
doc.text(20, 20, 'Do you like that?');
doc.save('Test.pdf');
}
</script>
html2canvas 렌더링 및 최신 CSS3/J가 없는 것에 불만을 가지고 있으며 pdfMake의 구식 버전의 WebKit에 대한 특정 CSS 지원을 인쇄하고 있습니다.
여기 이론적인 솔루션이 있습니다.헤드리스로 페이지를 충실하게 렌더링 할 수 있고 페이지 분할, 여백, 다양한 페이지 크기를 지원하며 자동화할 수 있습니다.WebGl을 PDF로 렌더링할 수도 있습니다.
- Chrome에는 devtools 프로토콜이 있습니다...print to PDF 기능이 있습니다.
- 발췌: https://gitlab.com/-/snippets/new
- 공식 20k-SLOC 사양: https://github.com/ChromeDevTools/devtools-protocol/blob/master/json/browser_protocol.json
- 노드와 https://github.com/GoogleChrome/chrome-launcher을 사용하여 크롬 헤드리스 실행 가능...렌더링되기를 기다립니다.
- 이익
chrome_devtools 프로토콜에서 실행하는 printToPDF 명령:
printToPDF({
printBackground: false,
pageWidth: 8.5,
pageHeight: 11,
transferMode: "ReturnAsStream" // or ReturnAsBase64
})
2022년 답변:
HTML Element에서 PDF를 생성하고 파일을 저장하도록 요청하려면:
import { jsPDF } from "jsPDF"
function generatePDF() {
const doc = new jsPDF({ unit: 'pt' }) // create jsPDF object
const pdfElement = document.getElementById('pdf') // HTML element to be converted to PDF
doc.html(pdfElement, {
callback: (pdf) => {
pdf.save('MyPdfFile.pdf')
},
margin: 32, // optional: page margin
// optional: other HTMLOptions
})
}
<button onclick="generatePDF()">Save PDF</button>
...
PDF를 인쇄하지 않고 미리 보려면:
doc.html(pdfElement, {
callback: (pdf) => {
const myPdfData = pdf.output('datauristring')
}
})
<embed type="application/pdf" src={myPdfData} />
...
기타 HTMLOption:
https://github.com/parallax/jsPDF/blob/master/types/index.d.ts
div를 PDF로 캡처하려면 https://grabz.it 솔루션을 사용합니다.쉽고 유연한 JavaScript API를 탑재하여 div나 span과 같은 단일 HTML 요소의 콘텐츠를 캡처할 수 있습니다.
구현하려면 먼저 앱 키와 비밀 정보를 얻고 (무료) SDK를 다운로드해야 합니다.
이제 예를 들어보죠.
예를 들어 다음과 같은 HTML이 있다고 가정합니다.
<div id="features">
<h4>Acme Camera</h4>
<label>Price</label>$399<br />
<label>Rating</label>4.5 out of 5
</div>
<p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit eget
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum risus at
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p>
features id 아래에 있는 내용을 캡처하려면 다음 작업을 수행해야 합니다.
//add the sdk
<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
//login with your key and secret.
GrabzIt("KEY", "SECRET").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "pdf"}).Create();
</script>
주의해 주세요.target: #feature.#feature위의 예시와 같이 CSS 셀렉터입니다.이제 페이지가 로드되면 스크립트 태그와 동일한 위치에 이미지 스크린샷이 생성되고 기능 div의 모든 내용이 포함되며 다른 내용은 포함되지 않습니다.
div-screenshot 메커니즘에 대해 수행할 수 있는 기타 구성 및 사용자 지정입니다. 여기에서 확인하십시오.
누구라도 이것을 시도한다
(function () {
var
form = $('.form'),
cache_width = form.width(),
a4 = [595.28, 841.89]; // for a4 size paper width and height
$('#create_pdf').on('click', function () {
$('body').scrollTop(0);
createPDF();
});
//create pdf
function createPDF() {
getCanvas().then(function (canvas) {
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('Bhavdip-html-to-pdf.pdf');
form.width(cache_width);
});
}
// create canvas object
function getCanvas() {
form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
return html2canvas(form, {
imageTimeout: 2000,
removeContainer: true
});
}
}());
언급URL : https://stackoverflow.com/questions/18191893/generate-pdf-from-html-in-div-using-javascript
'programing' 카테고리의 다른 글
| PHP에서 이것은 무엇을 의미합니까: -> 또는 => (0) | 2022.10.20 |
|---|---|
| wait Promise.all()과 multiple wait 사이에 어떤 차이가 있습니까? (0) | 2022.10.10 |
| Vue에서 숫자 입력 구성 요소를 생성하는 방법(제한을 초과하여 입력할 수 없음) (0) | 2022.10.10 |
| $str[0] 문자열의 첫 번째 문자 가져오기 (0) | 2022.10.10 |
| Django에서 고정 장치를 로드할 때 내용 유형에 문제가 있습니다. (0) | 2022.10.10 |