jsPDF
v2.5.2
Библиотека для создания PDF-файлов в JavaScript.
Вы можете найти меня в Твиттере: @MrRio или зайти на сайт моей компании для получения консультации.
jsPDF теперь поддерживается yWorks — экспертами в области диаграмм.
Рекомендуется: получить jsPDF из npm:
npm install jspdf --save
# or
yarn add jspdfАльтернативно загрузите его из CDN:
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/jspdf.umd.min.js " > </ script >Или всегда получайте последнюю версию через unpkg.
< script src =" https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js " > </ script > Папка dist этого пакета содержит файлы разных типов:
core-js , вариант umd является автономным.Обычно нет необходимости указывать точный файл в операторе импорта. Инструменты сборки или Node автоматически определяют нужный файл, поэтому импорта «jspdf» достаточно.
Теперь вы готовы приступить к созданию документа:
import { jsPDF } from "jspdf" ;
// Default export is a4 paper, portrait, using millimeters for units
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ;Если вы хотите изменить размер бумаги, ориентацию или единицы измерения, вы можете сделать:
// Landscape export, 2×4 inches
const doc = new jsPDF ( {
orientation : "landscape" ,
unit : "in" ,
format : [ 4 , 2 ]
} ) ;
doc . text ( "Hello world!" , 1 , 1 ) ;
doc . save ( "two-by-four.pdf" ) ; const { jsPDF } = require ( "jspdf" ) ; // will automatically load the node version
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ; // will save the file in the current working directory require ( [ "jspdf" ] , ( { jsPDF } ) => {
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ;
} ) ; const { jsPDF } = window . jspdf ;
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ; Некоторые функции jsPDF требуют дополнительных зависимостей. Например, метод html , который зависит от html2canvas и, при наличии строкового HTML-документа, dompurify . JsPDF загружает их динамически, когда это необходимо (используя соответствующий формат модуля, например, динамический импорт). Инструменты сборки, такие как Webpack, автоматически создают отдельные фрагменты для каждой из необязательных зависимостей. Если ваше приложение не использует какие-либо дополнительные зависимости, вы можете запретить Webpack генерировать фрагменты, определив их как внешние зависимости:
// webpack.config.js
module . exports = {
// ...
externals : {
// only define the dependencies you are NOT using as externals!
canvg : "canvg" ,
html2canvas : "html2canvas" ,
dompurify : "dompurify"
}
} ; В проектах Vue CLI внешние элементы можно определить с помощью свойств configureWebpack или ChainWebpack файла vue.config.js (сначала его необходимо создать в новых проектах).
В проектах Angular внешние параметры можно определить с помощью пользовательских конструкторов веб-пакетов.
В проектах React ( create-react-app ) внешние элементы могут быть определены либо с помощью реакции-приложения-rewired, либо с помощью извлечения.
jsPDF можно импортировать так же, как и любую другую стороннюю библиотеку. Это работает со всеми основными наборами инструментов и фреймворками. jsPDF также предлагает файл типизации для проектов TypeScript.
import { jsPDF } from "jspdf" ;Вы можете добавить jsPDF в свой метеорный проект следующим образом:
meteor add jspdf:core
Для работы jsPDF требуются современные API-интерфейсы браузера. Чтобы использовать jsPDF в старых браузерах, таких как Internet Explorer, требуются полифилы. Вы можете загрузить все необходимые полифилы следующим образом:
import "jspdf/dist/polyfills.es.js" ;Альтернативно вы можете загрузить готовый файл полифила. Это не рекомендуется, поскольку в конечном итоге вам придется загружать полифилы несколько раз. Это все еще может быть удобно для небольших приложений или быстрых POC.
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/polyfills.umd.js " > </ script > 14 стандартных шрифтов в PDF ограничены кодовой страницей ASCII. Если вы хотите использовать UTF-8, вам необходимо интегрировать собственный шрифт, который предоставляет необходимые глифы. jsPDF поддерживает файлы .ttf. Поэтому, если вы хотите, чтобы в вашем PDF-файле был, например, текст на китайском языке, ваш шрифт должен содержать необходимые китайские глифы. Итак, проверьте, поддерживает ли ваш шрифт нужные глифы, иначе вместо правильного текста будут отображаться искаженные символы.
Чтобы добавить шрифт в jsPDF, используйте наш конвертер шрифтов в /fontconverter/fontconverter.html. Конвертер шрифтов создаст js-файл с содержимым предоставленного ttf-файла в виде строки в кодировке base64 и дополнительным кодом для jsPDF. Вам просто нужно добавить этот сгенерированный js-файл в свой проект. После этого вы готовы использовать метод setFont в своем коде и написать текст в кодировке UTF-8.
Альтернативно вы можете просто загрузить содержимое файла *.ttf в виде двоичной строки с помощью fetch или XMLHttpRequest и добавить шрифт в файл PDF:
const doc = new jsPDF ( ) ;
const myFont = ... // load the *.ttf font file as binary string
// add the font to jsPDF
doc . addFileToVFS ( "MyFont.ttf" , myFont ) ;
doc . addFont ( "MyFont.ttf" , "MyFont" , "normal" ) ;
doc . setFont ( "MyFont" ) ; После слияния с форком yWorks появилось много новых функций. Однако некоторые из них ломают API, поэтому существует API-переключение между двумя режимами API:
Вы можете переключаться между двумя режимами, вызвав
doc . advancedAPI ( doc => {
// your code
} ) ;
// or
doc . compatAPI ( doc => {
// your code
} ) ;JsPDF автоматически переключится обратно в исходный режим API после выполнения обратного вызова.
Пожалуйста, проверьте, обработан ли ваш вопрос уже на Stackoverflow https://stackoverflow.com/questions/tagged/jspdf. Не стесняйтесь задавать там вопрос с тегом jspdf .
Запросы функций, отчеты об ошибках и т. д. приветствуются. Обратите внимание, что отчеты об ошибках должны соответствовать следующим правилам:
jsPDF не может жить без помощи сообщества! Если вы считаете, что какая-то функция отсутствует или вы обнаружили ошибку, подумайте, можете ли вы выделить один или два часа и подготовить запрос на включение. Если вы просто заинтересованы в этом проекте и хотите помочь, посмотрите открытые проблемы, особенно те, которые помечены как «ошибка».
Вы можете найти информацию о создании и тестировании jsPDF в руководстве по участию.
Авторские права (c) Джеймс Холл, 2010–2021 гг., https://github.com/MrRio/jsPDF (c) yWorks GmbH, 2015–2021 гг., https://www.yworks.com/
Настоящим бесплатно любому лицу, получившему копию данного программного обеспечения и связанных с ним файлов документации («Программное обеспечение»), предоставляется разрешение на работу с Программным обеспечением без ограничений, включая, помимо прочего, права на использование, копирование, изменение, объединение. публиковать, распространять, сублицензировать и/или продавать копии Программного обеспечения, а также разрешать лицам, которым предоставлено Программное обеспечение, делать это при соблюдении следующих условий:
Вышеупомянутое уведомление об авторских правах и данное уведомление о разрешении должны быть включены во все копии или существенные части Программного обеспечения.
ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ, ГАРАНТИЯМИ ТОВАРНОЙ ЦЕННОСТИ, ПРИГОДНОСТИ ДЛЯ ОПРЕДЕЛЕННОЙ ЦЕЛИ И НЕНАРУШЕНИЯ ПРАВ. НИ ПРИ КАКИХ ОБСТОЯТЕЛЬСТВАХ АВТОРЫ ИЛИ ОБЛАДАТЕЛИ АВТОРСКИХ ПРАВ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ЗА ЛЮБЫЕ ПРЕТЕНЗИИ, УБЫТКИ ИЛИ ДРУГУЮ ОТВЕТСТВЕННОСТЬ, БУДЬ В ДЕЙСТВИЯХ ПО КОНТРАКТУ, ПРАВОНАРУШЕНИЮ ИЛИ ДРУГИМ ОБРАЗОМ, ВОЗНИКАЮЩИЕ ОТ, ИЗ ИЛИ В СВЯЗИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ИЛИ ДРУГИМИ СДЕЛКАМИ, ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ.
