Saya ingin melakukan fungsi untuk mengekspor PDF di web. Saya menemukan bahwa JSPDF direkomendasikan oleh banyak orang. Sayangnya, itu tidak mendukung orang Cina. Akhirnya, saya menemukan PDFMake, yang menyelesaikan masalah ini dengan baik. Efeknya dapat dilihat terlebih dahulu di http://pdfmake.org/playground.html. Selama penggunaan, juga ditemukan bahwa memasukkan gambar adalah hal yang relatif rumit.
Menanggapi masalah ini, konten utama artikel ini dapat dibagi menjadi tiga bagian:
• Metode Penggunaan Dasar PDFMake;
• cara memecahkan masalah Cina;
• Cara menyisipkan gambar dengan menentukan alamat gambar.
Metode Penggunaan Dasar PDFMake
1. Berisi dua file berikut
<skrip src = "build/pdfmake.min.js"> </script> <script src = "build/vfs_fonts.js"> </script>
2. Deklarasikan objek definisi dokumen dalam kode JS, yang merupakan istilah PDFMake sendiri. Sederhananya, itu adalah membuat objek yang berisi setidaknya atribut konten. Kemudian Anda dapat menghubungi metode PDFMake untuk mengekspor PDF, lihat kode berikut:
<script type = "text/javascript"> // Buat objek definisi dokumen var dd = {content: ['satu paragraf', 'paragraf lain, kali ini sedikit lebih lama untuk memastikan, baris ini akan dibagi menjadi setidaknya dua baris']}; // ekspor pdf pdfmake.createPdf (dd) .download (); </script>Ikuti contoh di atas dan Anda akan melihat file prompt yang akan diunduh. Untuk tutorial lengkap tentang PDFMake, silakan masuk ke proyek PDFMake untuk melihatnya.
PDFMake mendukung orang Cina
Tiga Langkah:
1. Buka situs web PDFMake Project, unduh semua proyek, lalu masukkan direktori proyek dan masukkan file font (seperti Microsoft Yahei.ttf) ke dalam direktori Contoh/Font, dan kemudian gunakan Grunt Dump_dir untuk menghasilkan file VFS_FONTS.JS baru;
Dari deskripsi di atas, kita dapat melihat bahwa proyek dikelola melalui Grunt. Jika tidak ada pengetahuan yang relevan, silakan online dan ambil bimbingan belajar terlebih dahulu.
Perintah Grunt Dump_dir akan mengemas semua file di direktori font, jadi tolong jangan menaruh file yang tidak berguna di dalamnya.
Microsoft Yahei.ttf mencari online, dan direktori tempat font disimpan di bawah disk sistem komputer Windows juga dapat ditemukan.
2. Kembali ke kode contoh Anda sendiri, ubah objek font PDFMake dalam kode JS dan nyatakan bahwa font yang ingin Anda gunakan:
pdfMake.fonts = { Roboto: { normal: 'Roboto-Regular.ttf', bold: 'Roboto-Medium.ttf', italics: 'Roboto-Italic.ttf', boldtalics: 'Roboto-Italic.ttf', boldtalics: 'Roboto-Italic.ttf' }, Microsoft Yahei: { normal: 'Microsoft Yahei.ttf ', tebal:' Microsoft Yahei.ttf ', huruf miring:' Microsoft Yahei.ttf ',}};3. Deklarasikan font yang akan digunakan secara default di objek definisi dokumen. Khususnya: Ini untuk mendeklarasikan suatu objek. Selain atribut konten, ia juga membutuhkan atribut staf default. Ada atribut font lain di bawah DefaultStyle:
var dd = {konten: ['tes Cina dan Inggris', 'paragraf lain, kali ini sedikit lebih lama untuk memastikan, baris ini akan dibagi menjadi setidaknya dua baris'], defaultstyle: {font: 'Microsoft Yahei'}};Berikut ini adalah kode sumber contoh lengkap berdasarkan langkah -langkah di atas:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <itement> Ekspor pertama saya </title> <script src = "build/pdfmake.min.min.js"> </script> <script src = "build/vfs.min.min.js"> </script> <script src = "build/vfs.min.min.js"> <script> <script src = "build/vfs. {Content: ['Tes Cina dan Bahasa Inggris', 'Paragraf lain, kali ini sedikit lebih lama untuk memastikan, baris ini akan dibagi menjadi setidaknya dua baris'], defaultStyle: {font: 'Microsoft Yahei'}}; pdfmake.fonts = {roboto: {normal: 'robotoo-regular.ttf', tebal: 'roboto--medium.ttf', huruf miring: 'roboto-iTalic.ttf', boldalics: 'roboto-iTalic.ttf', Boldalic: 'roboto-ittt.tttt.ttt',},},},}, roboto-ittt.ttf; pdfmake.createPdf (dd) .download (); } </script> </head> <body> <button onclick = "down ()"> Unduh </button> </body> </html>Masukkan gambar
Dalam hal memasukkan gambar, JSPDF mengharuskan gambar untuk dikonversi menjadi URL data terlebih dahulu, dan PDFMake memungkinkan jalur langsung ditentukan, yang tampaknya sangat nyaman, tetapi ini bersyarat, dan harus digunakan sebagai server, atau menempatkan gambar di vfs_fonts.js, jadi secara umum, itu tidak terlalu berguna, sehingga Anda masih harus mengkonversi gambar ke gambar tersebut.
Untuk mengatasi masalah ini, saya menulis objek fungsi Imagedataurl yang dapat melewati beberapa alamat gambar secara bersamaan. Setelah semua gambar dimuat, Imagedataurl.onComplete akan dipicu. URL data dari setiap gambar diambil melalui ini.imgdata di callback. PDF dapat dihasilkan dengan benar sesuai dengan persyaratan PDFMake.
Prinsip Imagedataurl adalah untuk menggambar gambar pada tag kanvas H5, dan kemudian mendapatkan URL data gambar melalui todataurl kanvas. Harap perhatikan masalah kompatibilitas browser saat menggunakannya.
Berikut ini adalah contoh penulisan sampleimage.jpg, sampleage.jpg, sampleimage.jpg ke PDF secara berurutan. Sampleage.jpg tidak ada selama pengujian, dan PDF secara langsung diabaikan.
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <itement> Ekspor kedua saya </title> <script src = "build/pdfmake.min.min.js"> </skrip> <script src src = "build/vfs.min.min.js"> </script> <cript script src = "build/vfs.min.min.js"> </skrip <script script src = "build/vfs.min.min.js"> </skrip <script script src = "build/vfs. Imagedataurl (["SampleImage.jpg", "SampleImage.jpg"]); x.onComplete = function () {var imgs = array baru (); Console.log ("Lengkap"); untuk (kunci dalam this.imgdata) {if (this.imgdata [key] == this.emptyobj) // abaikan gambar yang tidak ada; imgs.push ({image: this.imgdata [key]}); // format gambar pdfmake {gambar: gambar dataurl}} var dd = {content: ['title', imgs,],}; pdfmake.createPdf (dd) .download (); }} </script> </head> <body> <button onclick = "down ()"> unduh </attond> <script> function Imagedataurl (urls) {// URL harus berupa string atau string array this.completenum = 0; this.totalnum = 0; this.imgdata = array baru (); this.emptyobj = objek baru (); this.oncomplete = function () {}; this.getDataurl = function (url, index) {var c = document.createElement ("canvas"); var cxt = c.getContext ("2d"); var img = gambar baru (); var dataurl; var p; p = ini; img.src = url; img.onload = function () {var i; var maxwidth = 500; var skala = 1.0; if (img.width> maxwidth) {skala = maxwidth / img.width; c.width = maxwidth; c.height = math.floor (img.height * skala); } else {c.width = img.width; c.height = img.height; } cxt.drawimage (img, 0, 0, c.width, c.height); p.imgdata [indeks] = c.todataurl ('gambar/jpeg'); untuk (i = 0; i <p.totalnum; ++ i) {if (p.imgdata [i] == null) break; } if (i == p.totalnum) {p.oncomplete (); }}; img.onError = function () {p.imgdata [index] = p.emptyobj; untuk (i = 0; i <p.totalnum; ++ i) {if (p.imgdata [i] == null) break; } if (i == p.totalnum) {p.oncomplete (); }}; } if (URLS instance dari array) {this.totalnum = urls.length; this.imgdata = array baru (this.totalnum); untuk (kunci dalam url) {this.getDataurl (urls [key], key); }} else {this.imgdata = array baru (1); this.totalnum = 1; this.getDataurl (urls, 0); }} </script> </body> </html>Metode di atas untuk mengekspor plug-in PDF oleh JS (mendukung jalur penggunaan Cina dan gambar) adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.