Kuidas JavaScriptiga PDF-faile genereerida ja redigeerida: täielik juhend, teegid ja praktilised näited

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Sissejuhatus: Miks on vaja PDF‑faile JavaScriptis käsitleda?

PDF‑töötluse tähtsus ja JavaScripti roll

Viimastel aastatel on PDF muutunud asendamatuks failivorminguks nii ärilises kui ka isiklikus kasutuses. Lepingud, kviitungid, arved ja aruanded koostatakse üha enam PDF‑formaadis. Selle tulemusena on vajadus PDF‑failide loomise ja redigeerimise automatiseerimise järele kasvanud paljudes arenduskeskkondades.
JavaScript töötab otse brauseris ja on suurepärane dünaamiliste kliendipoolsete operatsioonide jaoks. Nende võimaluste kasutamine võimaldab tõhusalt PDF‑faile luua ja redigeerida. Eriti on tähelepanu pälvinud võime töödelda PDF‑faile täielikult kliendipooliselt – ilma serverit kaasamata.

JavaScripti kasutamise eelised PDF‑töötluses

1. Serveri koormuse vähenemine

Traditsiooniliselt toimusid PDF‑loomine ja -redigeerimine serveripool. JavaScripti kasutamisega saab töötlus lõpule viia kliendipool, mis vähendab oluliselt serverite koormust.

2. Reaalajas töötlus

JavaScriptiga saab kasutaja sisendi koheselt PDF‑sse kajastada. Näiteks saab vormi andmed kohe PDF‑iks konverteerida ja pakkuda allalaadimislingina.

3. Suur paindlikkus ja kohandatavus

JavaScripti teekide abil on lihtne luua väga kohandatavaid PDF‑faile koos graafikute, piltide või vormindatud tekstiga. Kuna JavaScript töötab enamikus kaasaegsetes brauserites, on ka keskkonnaspetsiifilised probleemid minimaalsed.

Praktikalised kasutusjuhtumid

1. Äridokumentide genereerimine

Saab automaatselt luua arveid ja kviitungeid, mida seejärel saab e‑postiga saata. Samuti on võimalik koheselt väljastada iga kliendi jaoks kohandatud dokumendid, suurendades efektiivsust.

2. Vormide andmete väljund

Võib rakendada funktsioone, mis salvestavad küsitluste või taotluste vormiandmed PDF‑na ja registreerivad need haldussüsteemis. See aitab üleminekul paberkandjal dokumendihaldusest digitaalsele töövoole.

3. Aruannete ja esitluste loomine

Dünaamiliselt andmetel põhinevaid aruandeid saab luua, lisades diagramme ja pilte. See vähendab märkimisväärselt aega, mis kulub materjalide ettevalmistamisele koosolekuteks või esitluste jaoks.

Tuleviku suundumused ja väljavaated

JavaScripti põhine PDF‑töötlus on oodata jätkuvat arengut. Kaheks peamiseks suunaks, mis tähelepanu köidavad:

1. Tugevam pilveintegreerimine – sujuv integratsioon pilveteenuste või andmebaasidega suurendab nõudlust veebirakenduste järele, mis pakuvad sisseehitatud PDF‑loomist ja -redigeerimist.
2. Paranenud mobiilitugi – kuna nutitelefonide ja tahvelarvutite kasutus muutub olulisemaks, jätkub PDF‑loomise optimeerimine reageerivate paigutuste jaoks.

2. Top 5 JavaScripti PDF‑teeki (võrdlustabeliga)

Õige JavaScripti PDF‑teegi valimise tähtsus

Õige teegi valimine on kriitiline PDF‑de genereerimisel või redigeerimisel JavaScriptiga. Hästi valitud teek suurendab arenduse efektiivsust ja võimaldab keerukat kohandamist, sealhulgas jaapani keele toe. Selles jaotises tutvustame viit peamist PDF‑teeki ning võrdleme nende funktsioone ja kasutusjuhtumeid.

1. PDF.js

Ülevaade

PDF.js on Mozilla poolt arendatud avatud lähtekoodiga PDF‑vaaturiteek. See on spetsialiseerunud PDF‑renderdamisele brauseris.

Funktsioonid

• Ainult vaatur: Keskendub puhtalt kuvamisele; ei toeta PDF‑loomist ega -redigeerimist.
• Kõrge ühilduvus: Töötaks ainult HTML5 ja JavaScriptiga – pole vaja pluginaid.
• Kõrge jõudlus: Kiire renderdamine ja tõhus suurte dokumentide käitlemine.

Kasutusjuhtumid

• Rakendused, mis vajavad PDF‑vaatamist, näiteks e‑raamatud või lepingud.

2. jsPDF

Ülevaade

jsPDF on kergekaaluline teek, mis on peamiselt mõeldud PDF‑failide genereerimiseks. See võimaldab hõlpsasti sisestada teksti, pilte ja tabeleid, muutes selle ideaalseks lihtsate dokumentide loomiseks.

Funktsioonid

• PDF‑loomine: Sobib hästi kliendipoolseks PDF‑loomiseks.
• Laiendatav: Toetab pluginaid täiendavate funktsioonide jaoks.
• Jaapani keel: Toetatud fontide konfigureerimisega.

Kasutusjuhtumid

• Automaatne kviitungite, arvete või lihtsate aruannete genereerimine.

3. pdf-lib

Ülevaade

pdf-lib toetab mitte ainult PDF-i genereerimist, vaid ka redigeerimist ja ühendamist. See on ühilduv TypeScriptiga ning integreerub sujuvalt kaasaegsetesse arenduskeskkondadesse.

Funktsioonid

• Redigeerimisvõimalused: Teksti või piltide lisamine olemasolevatesse PDF-idesse.
• Paindlik kohandamine: Pakub fondi sisestamist ja paigutuse kontrolli.
• Kõrge jõudlus: Efektiivne ka suurte PDF-operatsioonide korral.

Kasutusjuhtumid

• PDF-vormide või dünaamiliste andmearuannete loomine.

4. pdfmake

Ülevaade

pdfmake võimaldab lihtsat paigutuse määratlemist deklaratiivse API kaudu, muutes selle ideaalseks keerukate kujunduste ja tabelipaigutuste jaoks.

Funktsioonid

• Tugevad paigutusvõimed: Lihtne tabelite ja stiilide konfigureerimine.
• Mitmekeelne tugi: Toetab põhilisi jaapani fonte.
• JSON-põhine: Lihtne luua dünaamilisi dokumente.

Kasutusjuhtumid

• Aruanded, kataloogid ja tabelitega dokumendid.

5. html2pdf

Ülevaade

html2pdf teisendab HTML-elemente otse PDF-failideks. See on ideaalne PDF-ide genereerimiseks olemasolevate veebilehe kujunduste põhjal.

Funktsioonid

• HTML-põhine: Säilitab HTML/CSS kujunduse PDF-väljundis.
• Lihtne kasutada: Kiire seadistus lihtsaks väljundiks.
• Kohanduv sõbralik: Säilitab paigutuse mobiilseadmetel.

Kasutusjuhtumid

• Trükifunktsioonid veebilehtedele või fikseeritud paigutusega PDF-väljundile.

6. Võrdlustabel

Kokkuvõte

Igal JavaScripti PDF-teekonnal on erinevad tugevused:

• PDF.js: Parim ainult vaatamiseks.
• jsPDF: Parim lihtsaks PDF-genereerimiseks.
• pdf-lib: Ideaalne redigeerimiseks või keerukate funktsioonide lisamiseks.
• pdfmake: Tugev tabelite ja kohandatud paigutuse kujundamisel.
• html2pdf: Parim, kui soovid säilitada HTML-i kujundust.

3. Rakenduse näited: PDF-ide genereerimine ja redigeerimine JavaScriptiga

Sissejuhatus

JavaScript võimaldab lihtsat kliendipoolset PDF-genereerimist ja redigeerimist. See sektsioon tutvustab konkreetseid rakendusi, kasutades peamisi teeke. Proovi käivitada neid koodinäiteid, et mõista, kuidas need toimivad.

1. Lihtne PDF-genereerimine jsPDF-ga

Lihtsa teksti PDF-i loomine

const doc = new jsPDF();
doc.text("Hello, PDF!", 10, 10);
doc.save("sample.pdf");

Olulised punktid

1. Loo eksemplar:

• new jsPDF() loob uue PDF-dokumendi.

1. Lisa teksti:

• doc.text() paigutab “Hello, PDF!” koordinaatidele (10, 10).

1. Salvesta PDF:

• doc.save() laadib PDF-i alla nimega “sample.pdf”.

Näide: Pildi lisamine

const doc = new jsPDF();
const imgData = 'data:image/jpeg;base64,...';
doc.addImage(imgData, 'JPEG', 10, 40, 180, 160);
doc.save("image-sample.pdf");

2. PDF-ide redigeerimine pdf-lib-iga

Teksti lisamine olemasolevale PDF-ile

import { PDFDocument } from 'pdf-lib';

async function modifyPDF() {
  const url = 'sample.pdf';
  const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer());
  const pdfDoc = await PDFDocument.load(existingPdfBytes);
  const pages = pdfDoc.getPages();
  const firstPage = pages[0];

  firstPage.drawText('追加されたテキスト', { x: 50, y: 500, size: 20 });

  const pdfBytes = await pdfDoc.save();
  download(pdfBytes, "modified-sample.pdf", "application/pdf");
}

Olulised punktid

1. Laadi PDF:

• Kasuta PDFDocument.load() .

1. Redigeeri PDF-i:

• drawText() lisab teksti määratud asukohta.

1. Salvesta ja laadi alla:

• Salvesta muudetud PDF ja laadi see alla.

3. Paigutusmahukate PDF-ide loomine pdfmake-ga

Keerukate paigutuste loomine

const docDefinition = {
  content: [
    { text: 'レポートタイトル', style: 'header' },
    { text: '以下はサンプル表です。' },
    {
      table: {
        body: [
          ['項目1', '項目2', '項目3'],
          ['データ1', 'データ2', 'データ3'],
          ['データ4', 'データ5', 'データ6'],
        ],
      },
    },
  ],
  styles: {
    header: {
      fontSize: 18,
      bold: true,
      margin: [0, 0, 0, 10],
    },
  },
};
pdfMake.createPdf(docDefinition).download('sample-table.pdf');

Olulised punktid

1. Määra sisu: Tabelid ja tekst on määratletud content-is.
2. Stiili määratlus: styles kontrollib fondi- ja paigutusseadeid.
3. Allalaadimine: Kasuta download() PDF-i väljundiks.

4. Jaapani fondi tugi (jsPDF)

const doc = new jsPDF();
doc.addFileToVFS('NotoSansJP-Regular.ttf', fontData);
doc.addFont('NotoSansJP-Regular.ttf', 'NotoSansJP', 'normal');
doc.setFont('NotoSansJP');
doc.text('日本語対応テスト', 10, 10);
doc.save("japanese-sample.pdf");

Kokkuvõte

See jaotis tutvustas praktilisi näiteid, kasutades peamisi teeke:

• jsPDF: Lihtne PDF-i loomine ja piltide sisestamine.
• pdf-lib: Olemasolevate PDF-ide redigeerimine ja lehekülgede manipuleerimine.
• pdfmake: Tugev tabeli ja paigutuse kohandamine, osalise jaapani toe toetusega.

4. Jaapani fontide käsitlemine ja tõrkeotsing

Sissejuhatus

PDF-ide genereerimisel JavaScriptis on jaapani fontide käsitlemine üks kõige tavalisemaid väljakutseid. Probleemid, nagu loetamata tähed või puuduvad glüüfid, esinevad sageli. See jaotis selgitab, kuidas jaapani fonte õigesti konfigureerida ja kuidas leida levinud probleemide lahendusi.

1. Levinud probleemid jaapani fontidega

Miks on fontide põimimine vajalik

Inglise keele PDF-id kuvatakse tavaliselt vaikimisi fontidega õigesti, kuid jaapani nõuab erikäsitlust, sest:

• Jaapani fondid sisaldavad palju märke, mida vaikimisi fondid ei sisalda.
• Mõned teegid pakuvad piiratud jaapani fondi tuge.
• Ilma fontide põimimiseta võivad PDF-id sõltuvalt keskkonnast valesti kuvada.

Levinud vead

• Vigased tähed: Kuvatakse kui □ või ?, kuna fonti tugi puudub.
• Katkine paigutus: Vale reavahe või fondi suurus.
• Fondi laadimise vead: Kohandatud fondifaili ei saa laadida.

2. Jaapani fondi käsitlemine jsPDF-s

Fondifailide ettevalmistamine

Jaapani fontide põimimiseks vajate TrueType (.ttf) fonti. Näide: Noto Sans JP.

1. Allalaadimine: Hankige Noto Sans JP Google Fontsist.
2. Teisendage Base64-ks: Teisendage fondifail Base64 stringiks.

Näite kood

const doc = new jsPDF();
doc.addFileToVFS('NotoSansJP-Regular.ttf', fontData);
doc.addFont('NotoSansJP-Regular.ttf', 'NotoSansJP', 'normal');
doc.setFont('NotoSansJP');
doc.text('こんにちは、世界！', 10, 10);
doc.save('japanese-sample.pdf');

Selgitus

• addFileToVFS: Registreerib Base64 fondiandmed.
• addFont: Määratleb fondi nime ja stiili.
• setFont: Rakendab fondi.

3. Jaapani fondi käsitlemine pdfmake’is

Fontide ettevalmistamine ja seadistamine

var fonts = {
  Roboto: {
    normal: 'Roboto-Regular.ttf',
    bold: 'Roboto-Bold.ttf',
    italics: 'Roboto-Italic.ttf',
    bolditalics: 'Roboto-BoldItalic.ttf',
  },
};

var docDefinition = {
  content: [
    { text: '日本語テスト', font: 'Roboto', fontSize: 14 },
    { text: 'Hello, World!', fontSize: 12 },
  ],
};

pdfMake.createPdf(docDefinition).download('japanese-sample.pdf');

Selgitus

• Iga fondi stiil tuleb konfigureerida eraldi.
• font omadust kasutatakse fontide määramiseks sisus.

4. Tõrkeotsing

Tekst ei kuva õigesti

• Võimalik põhjus: Vale fondifail või Base64 teisendus.
• Lahendused: 1. Kinnitage Base64 põimimine. 2. Kontrollige .ttf-faili terviklikkust. 3. Veenduge, et MIME tüüp on õige.

Katkine paigutus

• Põhjus: Vale reavahe.
• Lahendus: Määra käsitsi fontSize ja lineHeight.

Mobiilse kodeerimise probleemid

• Põhjus: Seadmel puuduvad jaapani fondid.
• Lahendus: Alati põimi fondid.

Kokkuvõte

• jsPDF: Lihtne fondi põimimine Base64 abil.
• pdfmake: Tugev paigutuse kontroll, kuid nõuab üksikasjalikku fondi konfigureerimist.

5. Täiustatud tehnikad ja kasutusjuhtude lahendused

Sissejuhatus

JavaScripti PDF-teegid võivad toetada täiustatud kasutusjuhtumeid, nagu dünaamiline PDF-i genereerimine, andmebaasi integratsioon, kohandatud paigutused ja palju muud.

1. Dünaamiline andmete PDF-i genereerimine

Aruannete genereerimine JSON-ist

const doc = new jsPDF();
const data = [
  { 名前: "山田太郎", 年齢: 30, 職業: "エンジニア" },
  { 名前: "佐藤花子", 年齢: 25, 職業: "デザイナー" },
  { 名前: "田中一郎", 年齢: 40, 職業: "マネージャー" },
];
doc.text('ユーザーレポート', 10, 10);
doc.autoTable({
  head: [['名前', '年齢', '職業']],
  body: data.map(item => [item.名前, item.年齢, item.職業]),
});
doc.save('report.pdf');

Põhipunktid

• Dünaamilised andmed: Muunda JSON tabeliridadeks.
• Paigutuse haldamine: Kasuta autoTable pistikprogrammi lihtsaks tabeli loomiseks.

2. PDF-ide ühendamine ja jagamine

Mitme PDF-i ühendamine (pdf-lib)

import { PDFDocument } from 'pdf-lib';

async function mergePDFs(pdfUrls) {
  const mergedPdf = await PDFDocument.create();

  for (let url of pdfUrls) {
    const existingPdf = await fetch(url).then(res => res.arrayBuffer());
    const pdfDoc = await PDFDocument.load(existingPdf);
    const copiedPages = await mergedPdf.copyPages(pdfDoc, pdfDoc.getPageIndices());
    copiedPages.forEach(page => mergedPdf.addPage(page));
  }

  const pdfBytes = await mergedPdf.save();
  download(pdfBytes, "merged.pdf", "application/pdf");
}

Põhipunktid

• Kopeeri leheküljed mitmest PDF-ist.
• Ühenda üheks dokumendiks.

3. PDF-vormiväljad

Sisendväljade loomine (pdf-lib)

import { PDFDocument } from 'pdf-lib';

async function createForm() {
  const pdfDoc = await PDFDocument.create();
  const page = pdfDoc.addPage([500, 700]);

  const form = pdfDoc.getForm();
  const nameField = form.createTextField('name');
  nameField.setText('名前を入力してください');
  nameField.addToPage(page, { x: 50, y: 600, width: 300, height: 30 });

  const pdfBytes = await pdfDoc.save();
  download(pdfBytes, "form.pdf", "application/pdf");
}

Põhipunktid

• Toetab dünaamilist kasutaja sisestust.
• Väljaandmeid saab kasutada edasiseks töötlemiseks.

4. Kohandatud paigutused

Päis ja jalus (pdfmake)

const docDefinition = {
  header: { text: 'レポートヘッダー', alignment: 'center', margin: [0, 10, 0, 0] },
  footer: function(currentPage, pageCount) {
    return { text: `${currentPage} / ${pageCount}`, alignment: 'right', margin: [0, 0, 10, 0] };
  },
  content: [
    { text: 'レポート本文', fontSize: 12 },
  ],
};
pdfMake.createPdf(docDefinition).download('custom-layout.pdf');

5. Mobiilne ja reageeriv tugi

PDF genereerimine HTML-ist (html2pdf)

const element = document.getElementById('content');
html2pdf(element);

Kokkuvõte

Peamised edasijõudnud tehnikad:

• Dünaamilised andmed: Loo PDF-e JSON-ist.
• Ühendamine/redigeerimine: Kasuta pdf-lib’i edasijõudnud redigeerimiseks.
• Vormiväljad: Loo interaktiivseid dokumente.
• Kohandatud kujundus: Kasuta pdfmake’i paigutusrikaste dokumentide loomiseks.

6. Korduma Kippuvad Küsimused (KKK)

Sissejuhatus

See sektsioon vastab tavapärastele küsimustele, millega arendajad kokku puutuvad PDF-ide genereerimisel või redigeerimisel JavaScriptis.

1. Põhilised toimingud

K1. Milline teek on parim PDF-ide genereerimiseks JavaScriptis?

V: Vali vastavalt oma vajadustele:

• Lihtne PDF-i genereerimine: jsPDF
• Redigeerimine ja ühendamine: pdf-lib
• Kompleksed paigutused: pdfmake
• HTML-ist PDF-iks: html2pdf

K2. Kuidas kuvada jaapani teksti õigesti?

V: Järgi neid samme:

1. Valmista ette jaapani font (Noto Sans JP, IPA jne.)
2. Konverteeri font Base64-iks
3. Manusta see kasutades addFileToVFS() ja addFont()
4. Vali see kasutades setFont()

K3. Miks jaapani tekst katkeb mobiilseadmetes?

V: Mobiilseadmetel puuduvad jaapani fondid.
Lahendus: Manusta alati jaapani fondid.

K4. Kuidas lisada allkirja väli?

V: Saad sisestada allkirja pildi kasutades pdf-lib’i:

page.drawImage(imgData, {
  x: 50,
  y: 100,
  width: 200,
  height: 100,
});

2. Edasijõudnud kasutamine

K5. Kas ma saan sisestada dünaamilisi QR-koode PDF-idesse?

V: Jah, kasutades jsPDF-i.

K6. Kas ma saan HTML-vormid eksportida PDF-iks?

V: Jah, kasutades html2pdf.

Kokkuvõte

See KKK peaks aitama sul lahendada probleeme ja optimeerida oma JavaScripti PDF-töövoogu.

7. Kokkuvõte

Sissejuhatus

This article provided an in-depth explanation of how to generate and edit PDFs using JavaScript, covering basic operations, advanced techniques, library comparisons, and Japanese font handling.

1. Convenience and Flexibility of JavaScript-based PDF Operations

JavaScript runs on the client side, enabling real-time PDF generation and editing. This reduces server load and supports interactive features.

Benefits:

• Reduced server dependency
• Real-time interaction and preview
• High compatibility with modern browsers

2. Library Selection Summary

3. Implementation Examples Summary

• Basic PDF creation
• Dynamic data reports
• Editing existing PDFs
• Japanese font handling
• Custom design & layout control

4. Future Outlook

The JavaScript PDF ecosystem will continue to evolve:

1. Improved cloud integration
2. AI-assisted document generation
3. New libraries for speed and scalability

Conclusion

JavaScript is becoming increasingly essential for PDF processing in web apps and business systems. By leveraging the libraries and techniques discussed in this article, you can implement flexible and high-quality PDF solutions with ease.