Я хочу выполнить функцию для экспорта 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"> // Создать объект определения документа var dd = {content: ['One Aparach', 'другой абзац, на этот раз немного дольше, чтобы убедиться, что эта строка будет разделен как минимум на две строки']}; // Экспорт pdf pdfmake.createpdf (dd) .download (); </script>Следуйте примеру выше, и вы увидите загруженный файл приглашения. Для полного учебника о PDFMake, пожалуйста, войдите в проект PDFMAKE, чтобы просмотреть его.
PDFMake поддерживает китайский
Три шага:
1. Зайдите на веб -сайт PDFMake Project, загрузите все проекты, затем введите каталог проекта и поместите файл шрифта (например, Microsoft Yahei.ttf) в каталог примеров/шрифтов, а затем используйте Grunt Dimp_DIR для создания нового файла vfs_fonts.js;
Из приведенного выше описания мы видим, что проект управляется через Grunt. Если нет соответствующих знаний, перейдите в интернет и сначала возьмите репетиторство.
Команда Grunt Dimp_DIR будет упаковывать все файлы в каталоге шрифтов, поэтому, пожалуйста, не вкладывайте в него бесполезные файлы.
Microsoft yahei.ttf поиск в Интернете, а также каталог, где можно найти шрифты на диске Windows Computer System.
2. Вернитесь к своему примеру кода, измените объект шрифтов PDFMAKE в коде JS и заявьте, что шрифт, который вы хотите использовать:
pdfmake.fonts = {roboto: {normation: 'roboto-regular.ttf', bold: 'roboto-medium.ttf', курсив: 'roboto-italic.ttf', boldtalics: 'roboto-italic.ttf', boldtalics: 'roboto-alitalic.ttf'}, microsoft yah Yahei.ttf ', bold:' microsoft yahei.ttf ', italives:' 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> <cript src = "build/vfs_fonts.js" down () {var dd = {content: ['' китайский и английский тест ', «Другой абзац, на этот раз немного дольше, чтобы убедиться, что эта строка будет разделена по крайней мере на две строки»], defaultstyle: {font:' Microsoft yahei '}}; pdfmake.fonts = {roboto: {normation: 'roboto-regular.ttf', bold: 'roboto-medium.ttf', курсив: 'roboto-italic.ttf', boldalics: 'roboto-italic.ttf', boldalics: 'roboto-italic.ttf',}; pdfmake.createpdf (dd) .download (); } </script> </head> <body> <button onclick = "down ()"> скачать </button> </body> </html>Вставьте картинку
С точки зрения вставки изображений, JSPDF требует, чтобы изображение было преобразовано в URL -адрес в первую очередь, а PDFMake позволяет указать прямые пути, которые представляются очень удобными, но это условное, и его необходимо использовать в качестве сервера или поместить изображение в vfs_fonts.js, поэтому в целом это не очень полезно, поэтому вам все еще нужно конвертировать изображение в образе данных.
Чтобы решить эту проблему, я написал функциональный объект ImageDataurl, который может одновременно передавать несколько адресов изображения. После того, как все изображения загружаются, ImageDataurl.oncomplete будет запускается. URL данных каждого изображения выведен через это. Imgdata в обратном вызове. PDF может быть сгенерирован правильно в соответствии с требованиями PDFMAKE.
Принцип Imagedataurl - нарисовать изображение на теге H5 холста, а затем получить URL -адрес изображения через тодатаурл холста. Пожалуйста, обратите внимание на проблемы совместимости браузера при его использовании.
Ниже приведен пример написания sampleimage.jpg, samplegeage.jpg, sampleimage.jpg для pdf в последовательности. SampleGeage.jpg не существует во время тестирования, и PDF не игнорируется.
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "UTF-8"> <Title> мой второй экспорт pdf </title> <script src = "build/pdfmake.min.js"> </script> <cript src = "build/vfs_fonts.js" down () {var x = new Imagedataurl (["sampleimage.jpg", "sampleimage.jpg"]); x.oncomplete = function () {var imgs = new Array (); console.log ("overse"); for (key in this.imgdata) {if (this.imgdata [key] == this.emptyobj) // Игнорировать несуществующие картинки; imgs.push ({image: this.imgdata [key]}); // формат изображения pdfmake {image: image datairl}} var dd = {content: ['title', imgs,],}; pdfmake.createpdf (dd) .download (); }} </script> </head> <body> <button onclick = "down ()"> скачать </button> <script> function ImageDataurl (urls) {// URL -адреса должны быть строкой или строкой массивы 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 = новое изображение (); var datairl; 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) разрыв; } 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) разрыв; } if (i == p.totalnum) {p.oncomplete (); }}; } if (urls ancessionof array) {this.totalnum = urls.length; this.imgdata = new Array (this.totalnum); для (ключ в URL) {this.getDataurl (urls [key], key); }} else {this.imgdata = new Array (1); this.totalnum = 1; this.getDataurl (URLS, 0); }} </script> </body> </html>Приведенный выше метод экспорта плагинов PDF с помощью JS (поддержка китайцев и путей использования изображений)-это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.