jsPDF
v2.5.2
Uma biblioteca para gerar PDFs em JavaScript.
Você pode me encontrar no twitter: @MrRio ou acessar o site da minha empresa para consultoria.
O jsPDF agora é co-mantido pela yWorks – os especialistas em diagramação.
Recomendado: obtenha jsPDF do npm:
npm install jspdf --save
# or
yarn add jspdfAlternativamente, carregue-o de um CDN:
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/jspdf.umd.min.js " > </ script >Ou sempre obtenha a versão mais recente via unpkg
< script src =" https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js " > </ script > A pasta dist deste pacote contém diferentes tipos de arquivos:
core-js , a variante umd é independente.Normalmente não é necessário especificar o arquivo exato na instrução de importação. As ferramentas de construção ou o Node descobrem automaticamente o arquivo correto, portanto, importar "jspdf" é suficiente.
Então você está pronto para começar a fazer seu documento:
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" ) ;Se quiser alterar o tamanho, a orientação ou as unidades do papel, você pode fazer:
// 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" ) ; Algumas funções do jsPDF requerem dependências opcionais. Por exemplo, o método html , que depende de html2canvas e, quando fornecido com um documento HTML de string, dompurify . JsPDF os carrega dinamicamente quando necessário (usando o respectivo formato de módulo, por exemplo, importações dinâmicas). Ferramentas de construção como o Webpack criarão automaticamente partes separadas para cada uma das dependências opcionais. Se seu aplicativo não usar nenhuma das dependências opcionais, você poderá evitar que o Webpack gere os pedaços definindo-os como dependências externas:
// webpack.config.js
module . exports = {
// ...
externals : {
// only define the dependencies you are NOT using as externals!
canvg : "canvg" ,
html2canvas : "html2canvas" ,
dompurify : "dompurify"
}
} ; Em projetos Vue CLI , externos podem ser definidos por meio das propriedades configureWebpack ou chainWebpack do arquivo vue.config.js (precisa ser criado, primeiro, em novos projetos).
Em projetos Angular , externos podem ser definidos usando construtores de webpack personalizados.
Em projetos React ( create-react-app ), os externos podem ser definidos usando react-app-rewired ou ejetando.
jsPDF pode ser importado como qualquer outra biblioteca de terceiros. Isso funciona com todos os principais kits de ferramentas e estruturas. jsPDF também oferece um arquivo de digitação para projetos TypeScript.
import { jsPDF } from "jspdf" ;Você pode adicionar jsPDF ao seu projeto meteoro da seguinte maneira:
meteor add jspdf:core
jsPDF requer APIs de navegador modernas para funcionar. Para usar jsPDF em navegadores mais antigos, como o Internet Explorer, são necessários polyfills. Você pode carregar todos os polyfills necessários da seguinte maneira:
import "jspdf/dist/polyfills.es.js" ;Alternativamente, você pode carregar o arquivo polyfill pré-empacotado. Isso não é recomendado, pois você pode acabar carregando polyfills várias vezes. Ainda pode ser interessante para aplicações pequenas ou POCs rápidos.
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/polyfills.umd.js " > </ script > As 14 fontes padrão em PDF estão limitadas à página de códigos ASCII. Se quiser usar UTF-8 você terá que integrar uma fonte personalizada, que forneça os glifos necessários. jsPDF suporta arquivos .ttf. Portanto, se você quiser ter, por exemplo, texto em chinês em seu PDF, sua fonte deverá ter os glifos chineses necessários. Portanto, verifique se sua fonte suporta os glifos desejados ou ela mostrará caracteres distorcidos em vez do texto correto.
Para adicionar a fonte ao jsPDF, use nosso conversor de fontes em /fontconverter/fontconverter.html. O fontconverter criará um arquivo js com o conteúdo do arquivo ttf fornecido como string codificada em base64 e código adicional para jsPDF. Você só precisa adicionar este arquivo js gerado ao seu projeto. Você está então pronto para usar o método setFont em seu código e escrever seu texto codificado em UTF-8.
Alternativamente, você pode simplesmente carregar o conteúdo do arquivo *.ttf como uma string binária usando fetch ou XMLHttpRequest e adicionar a fonte ao arquivo 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" ) ; Desde a fusão com o fork do yWorks, há muitos recursos novos. No entanto, alguns deles quebram a API, e é por isso que há uma alternância de API entre dois modos de API:
Você pode alternar entre os dois modos ligando para
doc . advancedAPI ( doc => {
// your code
} ) ;
// or
doc . compatAPI ( doc => {
// your code
} ) ;O JsPDF retornará automaticamente ao modo API original após a execução do retorno de chamada.
Verifique se sua pergunta já foi tratada no Stackoverflow https://stackoverflow.com/questions/tagged/jspdf. Sinta-se à vontade para fazer uma pergunta lá com a tag jspdf .
Solicitações de recursos, relatórios de bugs, etc. são muito bem-vindos como problemas. Observe que os relatórios de bugs devem seguir estas diretrizes:
jsPDF não pode viver sem a ajuda da comunidade! Se você acha que um recurso está faltando ou encontrou um bug, considere se você pode reservar uma ou duas horas e preparar uma solicitação pull. Se você está simplesmente interessado neste projeto e quer ajudar, dê uma olhada nos problemas em aberto, especialmente aqueles rotulados como "bug".
Você pode encontrar informações sobre como construir e testar jsPDF no guia de contribuição
Copyright (c) 2010-2021 James Hall, https://github.com/MrRio/jsPDF (c) 2015-2021 yWorks GmbH, https://www.yworks.com/
É concedida permissão, gratuitamente, a qualquer pessoa que obtenha uma cópia deste software e dos arquivos de documentação associados (o "Software"), para negociar o Software sem restrições, incluindo, sem limitação, os direitos de usar, copiar, modificar, mesclar , publicar, distribuir, sublicenciar e/ou vender cópias do Software e permitir que as pessoas a quem o Software seja fornecido o façam, sujeito às seguintes condições:
O aviso de direitos autorais acima e este aviso de permissão serão incluídos em todas as cópias ou partes substanciais do Software.
O SOFTWARE É FORNECIDO "COMO ESTÁ", SEM GARANTIA DE QUALQUER TIPO, EXPRESSA OU IMPLÍCITA, INCLUINDO, MAS NÃO SE LIMITANDO ÀS GARANTIAS DE COMERCIALIZAÇÃO, ADEQUAÇÃO A UM DETERMINADO FIM E NÃO VIOLAÇÃO. EM HIPÓTESE ALGUMA OS AUTORES OU DETENTORES DE DIREITOS AUTORAIS SERÃO RESPONSÁVEIS POR QUALQUER RECLAMAÇÃO, DANOS OU OUTRA RESPONSABILIDADE, SEJA EM UMA AÇÃO DE CONTRATO, ATO ILÍCITO OU DE OUTRA FORMA, DECORRENTE DE, OU EM CONEXÃO COM O SOFTWARE OU O USO OU OUTRAS NEGOCIAÇÕES NO SOFTWARE.
