Quero fazer uma função para exportar PDF na web. Descobri que o JSPDF é recomendado por muitas pessoas. Infelizmente, não suporta chinês. Finalmente, encontrei o PDFMake, que resolveu bem esse problema. Seu efeito pode ser visto primeiro em http://pdfmake.org/playground.html. Durante o uso, também foi descoberto que a inserção de imagens era uma coisa relativamente pesada.
Em resposta a esses problemas, o conteúdo principal deste artigo pode ser dividido em três partes:
• Método de uso básico de pdfmake;
• como resolver problemas chineses;
• Como inserir imagens especificando o endereço da imagem.
Método de uso básico de pdfmake
1. Contém os dois arquivos a seguir
)
2. Declare um objeto de definição de documentos no código JS, que é o termo do PDFMake. Para simplificar, é criar um objeto que contém pelo menos o atributo de conteúdo. Em seguida, você pode ligar para o método PDFMake para exportar o PDF, consulte o seguinte código:
<script type = "text/javascript"> // Crie objeto Document-Definition var dd = {content: ['um parágrafo', 'outro parágrafo, desta vez um pouco mais para garantir que essa linha seja dividida em pelo menos duas linhas']}; // exportar pdf pdfmake.createpdf (dd) .Download (); </script>Siga o exemplo acima e você verá o arquivo prompt para ser baixado. Para um tutorial completo sobre o PDFMake, faça login no projeto PDFMake para visualizá -lo.
O PDFMake suporta chinês
Três etapas:
1. Vá para o site do Projeto PDFMake, faça o download de todos os projetos, digite o diretório do projeto e coloque o arquivo de font (como Microsoft yahei.ttf) no diretório Exemplos/Fontes e use Grunt Dump_Dir para gerar um novo arquivo vfs_fonts.js;
A partir da descrição acima, podemos ver que o projeto é gerenciado através do Grunt. Se não houver conhecimento relevante, fique on -line e leve um tutoria primeiro.
O comando GRUNT DUMP_DIR empacotará todos os arquivos no diretório Fonts, portanto, não coloque arquivos inúteis nele.
Microsoft yahei.ttf Pesquisas on -line e o diretório onde as fontes são armazenadas no disco do sistema de computador do Windows também podem ser encontradas.
2. Volte ao seu próprio código de exemplo, modifique o objeto Fonts do PDFMake no código JS e declare que a fonte que você deseja usar:
pdfmake.fonts = {roboto: {normal: 'roboto-regus.ttf', negrito: 'roboto-medium.ttf', itálico: 'roboto-italic.ttf', boldtalics: 'roboto-italic.ttf', boldtalics: 'roboto-italic italic.tTtf', 'robotoTo-italic.tttalic.ticonic (roboto-italic.ttf', boldtalics: 'roboto-italic italic. 'Microsoft yahei.ttf', negrito: 'Microsoft yahei.ttf', itálico: 'Microsoft yahei.ttf',}};3. Declare a fonte a ser usada por padrão no objeto de definição de documentos. Especificamente: é para declarar um objeto. Além do atributo de conteúdo, ele também precisa de um atributo padrão. Há outro atributo de fonte sob o padrão padrão:
var dd = {content: ['teste chinês e inglês', 'Outro parágrafo, desta vez um pouco mais para garantir que essa linha seja dividida em pelo menos duas linhas'], defaultStyle: {font: 'Microsoft yahei'}};A seguir, é apresentado um exemplo de código -fonte completo com base nas etapas acima:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> meu primeiro exportar pdf </title> <script src = "build/pdfmake.min.js"> </script> <script sc = " {var dd = {content: ['Teste de chinês e inglês', 'Outro parágrafo, desta vez um pouco mais para garantir que essa linha seja dividida em pelo menos duas linhas'], defaultStyle: {font: 'Microsoft yahei'}}; pdfMake.fonts = { Roboto: { normal: 'Roboto-Regular.ttf', bold: 'Roboto-Medium.ttf', italics: 'Roboto-Italic.ttf', boldalics: 'Roboto-Italic.ttf', boldalics: 'Roboto-Italic.ttf', } }; pdfmake.createpdf (dd) .Download (); } </script> </ad Head> <body> <button onclick = "Down ()"> Download </button> </body> </html>Insira a imagem
Em termos de inserção de imagens, o JSPDF exige que a imagem seja convertida em URL de dados primeiro, e o PDFMake permite que os caminhos diretos sejam especificados, o que parece muito conveniente, mas isso é condicional e deve ser usado como servidor, ou a imagem em VFS_Fonts.JS, em geral, é que não é muito útil.
Para resolver esse problema, escrevi um objeto de função do IMAGEDATAURL que pode passar em vários endereços de imagem ao mesmo tempo. Depois que todas as imagens são carregadas, o Imagagataurl.OnComplete será acionado. O URL de dados de cada imagem é retirado por isso.imgdata no retorno de chamada. O PDF pode ser gerado corretamente de acordo com os requisitos do PDFMake.
O princípio do Imagemataurl é desenhar a imagem na tag de tela do H5 e, em seguida, obter o URL de dados da imagem através do Todataurl da tela. Por favor, preste atenção aos problemas de compatibilidade do navegador ao usá -los.
A seguir, é apresentado um exemplo de gravação de sampleImage.jpg, sampleage.jpg, sampleImage.jpg a pdf em sequência. Sampleage.jpg não existe durante o teste e o PDF é diretamente ignorado.
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> meu segundo exportação pdf </title> <script src = "build/pdfmake.min.js"> </script> <script <script sc = " {var x = new IMAGEDATAURL (["SampleImage.jpg", "sampleImage.jpg"]); x.onComplete = function () {var iMgs = new Array (); console.log ("completo"); para (chave neste.imgdata) {if (this.imgdata [key] == this.emptyobj) // ignora as imagens inexistentes; imgs.push ({imagem: this.imgdata [key]}); // formato de imagem de pdfmake {imagem: imagem dataurl}} var dd = {content: ['title', imgs,],}; pdfmake.createpdf (dd) .Download (); }} </script> </ad Head> <body> <button onclick = "Down ()"> Download </button> </script> função imagedataurl (urls) {// URLs deve ser uma string ou uma matriz de string 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 = this; img.src = url; img.onload = function () {var i; var maxwidth = 500; escala var = 1,0; if (img.width> maxwidth) {scale = maxwidth / img.width; C.Width = MaxWidth; c.Height = Math.Floor (IMG.Height * escala); } else {c.width = img.width; c.Height = img.Height; } cxt.Drawimage (img, 0, 0, c.width, c.Height); p.imgdata [index] = c.todataurl ('imagem/jpeg'); for (i = 0; i <p.totalnum; ++ i) {if (p.imgdata [i] == null) quebra; } 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) quebra; } if (i == p.TotalNum) {p.onComplete (); }}; } if (urls instayof matwe) {this.totalnum = urls.length; this.imgdata = nova matriz (this.totalnum); para (chave em urls) {this.getDataurl (URLS [key], chave); }} else {this.imgdata = nova matriz (1); this.Totalnum = 1; this.getDataurl (URLs, 0); }} </script> </body> </html>O método acima para exportar plug-ins de PDF por JS (apoiando os caminhos de uso chinês e de imagem) é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.