웹에서 PDF를 내보내는 기능을하고 싶습니다. 나는 많은 사람들이 JSPDF를 추천한다는 것을 알았습니다. 불행히도, 그것은 중국어를 지원하지 않습니다. 마지막으로 PDFMAKE를 발견 하여이 문제를 잘 해결했습니다. 그 효과는 http://pdfmake.org/playground.html에서 먼저 볼 수 있습니다. 사용하는 동안 사진을 삽입하는 것이 비교적 번거로운 것임으로 밝혀졌습니다.
이러한 문제에 대한 응답 으로이 기사의 주요 내용은 세 부분으로 나눌 수 있습니다.
• PDFMAKE의 기본 사용 방법;
• 중국 문제를 해결하는 방법;
• 이미지 주소를 지정하여 그림을 삽입하는 방법.
PDFMAKE의 기본 사용법
1. 다음 두 파일이 포함되어 있습니다
<script src = "build/pdfmake.min.js"> </script> <script src = "build/vfs_fonts.js"> </script>
2. JS 코드에서 문서 정의 객체를 선언하는데, 이는 PDFMake 자체 용어입니다. 간단히 말해서, 적어도 컨텐츠 속성이 포함 된 객체를 만드는 것입니다. 그런 다음 PDFMake 메소드를 호출하여 PDF를 내보내고 다음 코드를 참조하십시오.
<script type = "text/javaScript"> // docum // export pdf pdfmake.createpdf (dd) .download (); </스크립트>
위의 예를 따르면 다운로드 할 프롬프트 파일이 표시됩니다. PDFMAKE에 대한 완전한 튜토리얼을 보려면 PDFMAKE 프로젝트에 로그인하여이를 확인하십시오.
PDFMAKE는 중국어를 지원합니다
세 단계 :
1. PDFMAKE 프로젝트 웹 사이트로 이동하여 모든 프로젝트를 다운로드 한 다음 프로젝트 디렉토리를 입력 한 다음 글꼴 파일 (예 : Microsoft Yahei.ttf)을 예제/글꼴 디렉토리에 넣은 다음 Grunt Dump_Dir를 사용하여 새 VFS_FONTS.js 파일을 생성하십시오.
위의 설명에서 프로젝트가 Grunt를 통해 관리되는 것을 알 수 있습니다. 관련 지식이 없다면 온라인으로 가서 먼저지도를 받으십시오.
grunt dump_dir 명령은 Fonts 디렉토리에 모든 파일을 패키지하므로 쓸모없는 파일을 넣지 마십시오.
Microsoft Yahei.ttf 온라인 검색 및 Windows 컴퓨터 시스템 디스크 아래에 글꼴이 저장되는 디렉토리도 찾을 수 있습니다.
2. 자신의 예제 코드로 돌아가서 JS 코드에서 PDFMake의 글꼴 개체를 수정하고 사용하려는 글꼴을 선언하십시오.
pdfmake.fonts = {roboto : {normal : 'roboto-regular.ttf', bold : 'roboto-medium.ttf', 이탈리아 : 'roboto-italic.ttf', boldtalics : 'roboto-italic.ttf', boldtalics : 'roboto-yalic.ttf'}, 마이크로 포트 '}. Yahei.ttf ', Bold :'Microsoft Yahei.ttf ', 이탤릭체 :'Microsoft Yahei.ttf ',}};3. 문서 정의 객체에서 기본적으로 사용하도록 글꼴을 선언합니다. 구체적으로 : 객체를 선언하는 것입니다. 내용 속성 외에도 기본 스타일 속성도 필요합니다. 기본 스타일에는 다른 글꼴 속성이 있습니다.
var dd = {content : [ '중국어와 영어 테스트', '또 다른 단락, 이번에는 조금 더 길어지기 위해이 줄은 적어도 두 줄로 나뉘어 질 것'], defaultStyle : {font : 'microsoft yahei'}};다음은 위의 단계를 기반으로 한 전체 예제 소스 코드입니다.
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> 나의 첫 번째 내보내기 pdf </title> <script src = "build/pdfmake.min.js"> </script> <scrc = "build/vfs_fonts. down () {var dd = {content : [ '중국어와 영어 테스트', '또 다른 단락, 이번에는 조금 더 길어지기 위해 조금 더 길게,이 줄은 적어도 두 줄로 나뉘어 질 것'], defaultStyle : {font : 'microsoft yahei'}}; pdfmake.fonts = {roboto : {normal : 'roboto-Regular.ttf', bold : 'roboto-medium.ttf', 이탤릭체 : 'roboto-italic.ttf', boldalics : 'roboto-italic.ttf', boldalics : 'roboto-yalic.ttf',}; pdfmake.createpdf (dd) .download (); }사진을 삽입하십시오
이미지 삽입 측면에서 JSPDF는 이미지를 데이터 URL로 먼저 변환해야하며 PDFMake는 직접 경로를 지정할 수 있도록해야합니다. 이는 매우 편리한 것처럼 보이지만 조건부이므로 서버로 사용되거나 VFS_FONTS.js에 이미지를 사용해야하므로 일반적으로 이미지를 데이터 형식으로 변환해야합니다.
이 문제를 해결하기 위해, 나는 여러 이미지 주소로 동시에 전달할 수있는 Imageataurl의 함수 객체를 작성했습니다. 모든 이미지가로드되면 ImageAtaurl.oncomplete가 트리거됩니다. 각 이미지의 데이터 URL은 콜백에서 this.imgdata를 통해 꺼집니다. PDFMAKE의 요구 사항에 따라 PDF를 올바르게 생성 할 수 있습니다.
Imageataurl의 원리는 H5의 Canvas 태그에 이미지를 그린 다음 Canvas의 Todataurl을 통해 이미지의 데이터 URL을 얻는 것입니다. 브라우저 호환성 문제를 사용할 때주의를 기울이십시오.
다음은 sampleimage.jpg, sampleage.jpg, sampleimage.jpg to pdf를 순서대로 작성하는 예입니다. 테스트 중에 sampleage.jpg가 존재하지 않으며 PDF는 직접 무시됩니다.
<! docType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> 나의 두 번째 내보내기 pdf </title> <script src = "build/pdfmake.min.js"> </script> <scrc = "build/vfs_fonts. down () {var x = new imageAtaurl ([ "sampleimage.jpg", "sampleimage.jpg"]); x.oncomplete = function () {var imgs = new Array (); Console.log ( "완료"); for (this.imgdata) {if (this.imgdata [key] == this.emptyobj) // 존재하지 않는 그림을 무시합니다. imgs.push ({image : this.imgdata [key]}); // pdfmake의 이미지 형식 {image : image dataurl}} var dd = {content : [ 'title', imgs,],}; pdfmake.createpdf (dd) .download (); }} </script> </head> <body> <button onclick = "down ()"> 다운로드 </button> <cript> 함수 imagedataurl (urls) {// urls는 문자열이거나 문자열 배열이어야합니다. this.completenum = 0; this.totalnum = 0; this.imgdata = new array (); this.emptyobj = new Object (); this.oncomplete = function () {}; this.getDataurl = function (url, index) {var c = document.createElement ( "canvas"); var cxt = c.getContext ( "2d"); var img = new Image (); var dataurl; var p; p = 이것; img.src = url; img.onload = function () {var i; var maxwidth = 500; var scale = 1.0; if (img.width> maxwidth) {scale = maxwidth / img.width; c.width = maxWidth; c.height = math.floor (img.height * scale); } else {c.width = img.width; c.height = img.height; } cxt.DrawImage (img, 0, 0, c.width, c.height); p.imgdata [index] = c.todataurl ( 'image/jpeg'); for (i = 0; i <p.totalnum; ++ i) {if (p.imgdata [i] == null) break; } if (i == p.totalnum) {p.oncomplete (); }}; img.onerror = function () {p.imgdata [index] = p.emptyobj; for (i = 0; i <p.totalnum; ++ i) {if (p.imgdata [i] == null) break; } if (i == p.totalnum) {p.oncomplete (); }}; } if (urls instanceof array) {this.totalnum = urls.length; this.imgdata = 새로운 배열 (this.totalnum); for (urls in urls) {this.getDataurl (urls [key], key); }} else {this.imgdata = 새로운 배열 (1); this.totalnum = 1; this.getDataurl (urls, 0); }} </script> </body> </html>JS (중국어 및 이미지 사용 경로 지원)로 PDF 플러그인을 내보내는 위의 방법은 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.