HTML에서 PDF에 대한 순수한 클라이언트 및 순수한 서버 구현 솔루션

사용자는 양식을 작성하고 클릭하여 저장하고 PDF 문서를 직접 다운로드 할 수 있습니다.

아이디어

Google Chrome은 2017 년에 자체 크롬 헤드리스 기능을 개발하고 동시에 인형극을 출시했습니다. 인터페이스가 없지만 서버 기능 기능을 완료 할 수있는 브라우저로 이해할 수 있습니다.

따라서 서버에서 인형극 브라우저를 시작하고 대상 URL을 열고 Chrome 브라우저에서 제공 한 변환 기능을 사용하여 HTML을 PDF로 변환 할 수 있습니다.

먼저 인형극을 설치해야합니다. NPM 설치에 오류가있을 수 있습니다. CNPM Taobao 이미지를 사용하여 설치하는 것이 가장 좋습니다.

cnpm i puppeteer -S 설치 종속성을 입력하십시오.

JS 파일을 만들려면 꼭두각시 브라우저를 사용하여 URL을 열고 PDF를 저장하면됩니다.

 // html2pdf.jsconst puppeteer = require ( 'puppeteer'); (async function () {// 서비스 시작 const browser = await puppeeter.launch (); page.goto ( 'https://koa.bootcss.com/#context'); // html 페이지를 켜고 PATH.PDF ({path : test.pdf, format : 'a4'})에 저장하십시오.

그런 다음 콘솔에 node html2pdf.js 입력하여 서비스를 시작하십시오.

물론 Module.export는 비즈니스 로직에 따라 모듈 메소드를 내보낼 수도 있습니다.

결점

양식에 동적 데이터를 저장할 수 없습니다

서버의 요청 페이지이므로 사용자 입력이 요청 주소에 저장되지 않은 경우 컷 아웃 PDF는 페이지가 채워지지 않은 초기 상태입니다.

다시 말해, 우리의 요구에 많은 사용자 입력이 있으므로 정적 페이지 만 변환 할 수 있습니다.

아이디어

• html2canvas를 사용하여 변환 해야하는 dom 노드를 입력하고 트래버스를 캔버스 캔버스로 변환합니다.
• Canvas Canvas를 Base64 그림으로 변환하고 JSPDF를 사용하여 PDF 파일을 만들고 사진을 PDF에 삽입하십시오.

결점

왜곡.

스크린 샷을 페이지의 PDF에 삽입하는 것과 비슷하기 때문에 페이지의 해상도 및 구성이 출력 이미지의 품질에 영향을 줄 수 있음을 분명히 알 수 있습니다.

동시에 스크린 샷이기 때문에 페이지 링크 및 기타 기능이 손실 될 수 있습니다.

텍스트 컷오프

캔버스 캔버스가 PDF의 한 페이지 크기보다 크면 출력이 오류됩니다. 현재 캔버스 캔버스가 A4 크기를 초과하는지 여부를 결정해야합니다. 캔버스를 초과하면 캔버스를 세그먼트하고 다른 페이지에 삽입하십시오.

지금은 문제가 다시 발생합니다. 그림을 나누기 때문에 캔버스 내부 항목의 구조를 분석 할 수 없기 때문에 그림이나 텍스트가 절반에서 잘릴 수 있습니다.

핵심 코드

우리의 요구에는 그림과 링크가 없으므로 왜곡 문제는 우리에게 거의 영향을 미치지 않습니다. 동시에, 우리의 양식은 여러 개의 복제 길이의 여러 항목으로 구성되며, 이러한 항목은 매우 짧으며 A4 용지의 한 조각을 초과하지 않습니다 (필요한 경우 엄격하지는 않지만 DOM 요소의 너비와 높이를 얻고 DOM 요소의 높이에 따라 절단 할 수 있습니다).

따라서 항목에 따라 캔버스를 직접 나누고 각 항목을 A4 용지 페이지에 저장할 계획입니다.

시작하기 전에 몇 가지 핵심 접근 방식을 이해해야합니다.

html2canvas

 // DOM은 변환 할 DOM 노드입니다.

JSPDF

 // 인스턴스 생성 pdf = new JSPDF ( '', 'pt', 'a4'); // 이미지를 PDF 파일에 추가 // 첫 번째 매개 변수는 삽입 할 파일 (base64) 형식, 두 번째 매개 변수는 파일 형식입니다. // 세 번째와 네 번째는 그림의 왼쪽 상단의 좌표이며, 마지막 두 가지는 그림의 너비와 높이입니다. // 새 페이지 추가 pdf.addpage () // pdf 파일 저장 pdf.save ()

캔버스

 // canvas는 // sx, sy는 자르기 시작하는 좌표입니다. // swidth와 sheight는 자르기의 너비와 높이입니다. // dx와 dy는 자르기 후 이미지에 삽입 된 좌표입니다. // swidth, swidt. drawimage (canvas, sx, swidth, swidth, swidth, swidth, swidth, swidth, swidth, swidth, swidth). theight);

 /*** @description : pdf 파일에 양식* @return : pdf*/onsubmit () {// 이것은 내가 변환하려는 양식입니다. 비슷한 테이블이 많이 있습니다. // 요소의 너비와 높이를 가져옵니다. let height = form.getBoundingClientRect (). 높이; html2canvas (form, {backgroundcolor : #ffffff, 너비 : 너비 : 높이 : 높이 : 높이, 스케일 : 2, allesttaint : true,}). 그런 다음 ((canvas) => {let pdf = new jspdf ( '', 'pt', 'a4'); // let canvaslist = this.splitcanvas (canvas, this.forms.length); // 캔버스 목록을 통과하고 캔버스리스트 당 이미지를 추가합니다. 72-Resolution은 PDF.AdMIGE (itemimage, 'jpeg', 10,10,575.28,575.28/item.height); pdf.save ( 'test.pdf'); chunkHeight = height/num; // 각 슬라이스의 높이는 청크리스트를 놔두려고합니다. // 캔버스 노드 생성 let canvasitem = document.createElement (canvas); // 캔버스 크기를 초기화합니다. canvasitem.width = 너비; cxt = canvasitem.getContext (2d); // 자른 이미지를 새로운 캔버스 노드 CXT.DrawImage (Canvas, SX, Sy, Swidth, Sheight, DX, DY, SWIDTH, SHEIGHT)에 넣습니다. chunklist.push (canvasitem); } return chunkList;},

양식 후 페이지가 저장됩니다

PDF로 변환하는 효과

이것은 HTML에서 PDF의 순수한 클라이언트 및 Pure Server 구현 솔루션에 대한 기사입니다. 관련 HTML에서 PDF 컨텐츠에 대한 자세한 내용은 wulin.com의 이전 기사를 검색하거나 아래 관련 기사를 계속 찾아보십시오. 나는 모두가 앞으로 Wulin.com을 지원하기를 바랍니다!