Je veux faire une fonction pour exporter PDF sur le Web. J'ai constaté que JSPDF est recommandé par de nombreuses personnes. Malheureusement, il ne soutient pas le chinois. Enfin, j'ai trouvé Pdfmake, qui a bien résolu ce problème. Son effet peut être visualisé en premier sur http://pdfmake.org/playground.html. Pendant l'utilisation, il a également été constaté que l'insertion d'images était une chose relativement lourde.
En réponse à ces problèmes, le contenu principal de cet article peut être divisé en trois parties:
• Méthode d'utilisation de base de PDFMake;
• comment résoudre les problèmes chinois;
• Comment insérer des images en spécifiant l'adresse d'image.
Méthode d'utilisation de base de pdfmake
1. Contient les deux fichiers suivants
<script src = "build / pdfmake.min.js"> </ script> <script src = "build / vfs_fonts.js"> </ script>
2. Déclarez un objet de définition de document dans JS Code, qui est le propre terme de Pdfmake. Pour le dire simplement, c'est pour créer un objet qui contient au moins l'attribut de contenu. Ensuite, vous pouvez appeler la méthode PDFMake pour exporter le PDF, voir le code suivant:
<Script Type = "Text / Javascript"> // Créer un objet Document-Definition Var DD = {Content: ['One Paragraph', 'Un autre paragraphe, cette fois un peu plus longtemps pour s'assurer que cette ligne sera divisée en au moins deux lignes']}; // Exporter pdf pdfmake.createpdf (dd) .download (); </cript>Suivez l'exemple ci-dessus et vous verrez le fichier invite à télécharger. Pour un tutoriel complet sur PDFMake, veuillez vous connecter au projet PDFMake pour le visualiser.
Pdfmake soutient le chinois
Trois étapes:
1. Accédez au site Web du projet PDFMake, téléchargez tous les projets, puis entrez dans le répertoire du projet et placez le fichier de police (tel que Microsoft Yahei.TTF) dans le répertoire Exemples / Fonts, puis utilisez Grunt Dump_DIR pour générer un nouveau fichier VFS_FONTS.JS;
D'après la description ci-dessus, nous pouvons voir que le projet est géré par grognement. S'il n'y a pas de connaissances pertinentes, veuillez aller en ligne et prendre un tutorat en premier.
La commande grunt dump_dir emballera tous les fichiers du répertoire des polices, donc veuillez ne pas y mettre des fichiers inutiles.
Les recherches Microsoft Yahei.TTF en ligne, et le répertoire où les polices sont stockées sous le disque du système informatique Windows peuvent également être trouvées.
2. Revenez à votre propre exemple de code, modifiez l'objet Fonts de PDFMake dans le code JS et déclarez la police que vous souhaitez utiliser:
pdfmake.fonts = {roboto: {normal: 'roboto-regular.ttf', bold: 'roboto-medium.ttf', italique: 'roboto-italic.ttf', boldtalics: 'roboto-italic.ttf', boldtalics: 'Roboto-italic.ttf'}, microsoft yahei: {normal:'ttf '}, Micosoft yahei: {Normal:' Normal. Yahei.ttf ', Bold:' Microsoft Yahei.ttf ', italique:' Microsoft yahei.ttf ',}};3. Déclarez la police à utiliser par défaut dans l'objet de définition de document. Plus précisément: il s'agit de déclarer un objet. En plus de l'attribut de contenu, il a également besoin d'un attribut defaultStyle. Il y a un autre attribut de police sous le statut defaultyle:
var dd = {contenu: ['Test chinois et anglais', 'un autre paragraphe, cette fois un peu plus longtemps pour s'assurer que cette ligne sera divisée en au moins deux lignes'], defaultStyle: {Font: 'Microsoft Yahei'}};Voici un exemple complet de code source basé sur les étapes ci-dessus:
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <title>my first export PDF</title> <script src="build/pdfmake.min.js"></script> <script src="build/vfs_fonts.js"></script> <script> function down() { var dd = {Content: ['Chinois and English Test', 'Un autre paragraphe, cette fois un peu plus longtemps pour s'assurer que cette ligne sera divisée en au moins deux lignes'], defaultStyle: {Font: 'Microsoft Yahei'}}; pdfmake.fonts = {roboto: {normal: 'roboto-regular.ttf', bold: 'roboto-medium.ttf', italique: 'roboto-italic.ttf', boldalics: 'roboto-italic.ttf', boldalics: 'roboto-italic.ttf',}}; pdfmake.createpdf (dd) .download (); } </ script> </ head> <body> <bouton onclick = "down ()"> Télécharger </utton> </body> </html>Insérer une image
En termes d'insertion d'images, JSPDF exige que l'image soit d'abord convertie en URL de données, et PDFMake permet de spécifier des chemins directs, ce qui semble très pratique, mais cela est conditionnel, et il doit être utilisé comme serveur, ou mettre l'image dans VFS_FONTS.js, donc en général, il n'est pas très utile, donc vous avez encore pour convertir l'image en une forme de données URL.
Pour résoudre ce problème, j'ai écrit un objet de fonction d'imagedataurl qui peut transmettre plusieurs adresses d'image en même temps. Une fois toutes les images chargées, IMAgedataurl.oncomplete sera déclenché. L'URL de données de chaque image est supprimée via ce.imgdata dans le rappel. Le PDF peut être généré correctement en fonction des exigences de PDFMake.
Le principe d'imagedataurl est de dessiner l'image sur la balise de toile de H5, puis d'obtenir l'URL de données de l'image à travers le todataurl de la toile. Veuillez faire attention aux problèmes de compatibilité des navigateurs lorsque vous l'utilisez.
Ce qui suit est un exemple d'écriture de SampleMage.jpg, sampleage.jpg, sampleImage.jpg à pdf en séquence. Sampleage.jpg n'existe pas pendant les tests et le PDF est directement ignoré.
<! Doctype html> <html lang = "zh-cn"> <éadf> <meta charset = "utf-8"> <itle> ma deuxième exportation pdf </title> <script src = "build / pdfmake.min.js"> </cript> <script src = "build / vfs_fonts.js"> </ / script> script (script> XFS_FONTS.JS "> </ / script> script> {vfs_fonts.js"> </ / script> ~ script () {vfs_fonts.js "> </ </ Script> Script> ~ Script ' = new imagedataurl (["SampleImage.jpg", "SampleImage.jpg"]); x.onComplete = function () {var imgs = new Array (); console.log ("complet"); for (key dans this.imgdata) {if (this.imgdata [key] == this.emptyoBj) // ignore les images inexistantes; imgs.push ({image: this.imgdata [key]}); // format d'image de pdfmake {image: image dataUrl}} var dd = {contenu: ['title', imgs,],}; pdfmake.createpdf (dd) .download (); }} </ script> </ head> <body> <bouton onclick = "down ()"> télécharger </futton> <script> fonction imagedataurl (urls) {// urls doit être une chaîne ou un tableau de chaîne this.compléTénum = 0; this.totalnum = 0; this.imgData = new Array (); this.emptyObj = new object (); this.oncomplete = function () {}; this.getDataurl = fonction (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; Échelle VAR = 1,0; if (img.width> maxwidth) {scale = maxwidth / img.width; C.Width = MaxWidth; c.Height = math.floor (img.height * échelle); } 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) pause; } 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) pause; } if (i == p.totalnum) {p.onComplete (); }}; } if (Urls instanceof array) {this.totalnum = urls.length; this.imgData = nouveau tableau (this.totalnum); pour (clé dans URLS) {this.getDataurl (urls [key], key); }} else {this.imgdata = nouveau tableau (1); this.totalnum = 1; this.getDataurl (urls, 0); }} </ script> </ body> </html>La méthode ci-dessus d'exportation des plug-ins PDF par JS (prise en charge des chemins d'utilisation chinoise et d'image) est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.