# javascript で作る html から PDF 変換 pdfmake の日本語対応

import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
import htmlToPdfmake from "html-to-pdfmake";
pdfMake.vfs = pdfFonts.pdfMake.vfs;
pdfMake.fonts = {
  ipa: {
    normal: "ipagp.ttf",
    bold: "ipagp.ttf"
  }
};

const content = [
  {
    table: {
      headerRows: 1,
      widths: ["*", "auto", 100],
      body: [
        ["日本語対応", "pdf印刷ダウンロード", "pdfmake"],
        ["Value 1", "Value 2", "Value 3",
        [{ text: "Bold value", bold: true }, "Val 2", "Val 3"]
      ]
    }
  }
];

const docDef = {
  defaultStyle: {
    font: "japaneseFont"
  },
  styles: {
    alignRight: {
      alignment: "right"
    },
    alignCenter: {
      alignment: "center"
    },
    bold: {
      fontSize: 24,
      bold: true
    }
  },
  content: content
};

pdfMake.createPdf(docDef).download('htmlPdfConvert.pdf');

var docDefinition = {
  content: [
    "This is a standard paragraph, using default style",
    { text: "This paragraph will have a bigger font", fontSize: 15 },
    {
      text: [
        "This paragraph is defined as an array of elements to make it possible to ",
        { text: "restyle part of it and make it bigger ", fontSize: 15 },
        "than the rest.",
      ],
    },
  ],
};

// margin: [left, top, right, bottom]
{ text: 'sample', margin: [ 5, 2, 10, 20 ] },

// margin: [horizontal, vertical]
{ text: 'another text', margin: [5, 2] },

// margin: equalLeftTopRightBottom
{ text: 'last one', margin: 5 }

{
  content: [
    {
      columns: [{ text: "ログインID " }, { text: "パスワード " }],
    },
  ];
}

{
  content: [
    {
      columns: [{ text: "ログインID " }, { text: "パスワード " }],
    },
    {
      table: {
        widths: ["*", "auto", 100, "*"],
        body: [
          ["First", "Second", "Third", "The last one"],
          ["Value 1", "Value 2", "Value 3", "Value 4"],
          [{ text: "Bold value", bold: true }, "Val 2", "Val 3", "Val 4"],
        ],
      },
    },
    {
      table: {
        body: [
          [{ text: "First", width: 100 }, "Second", "Third", "The last one"],
          ["Value 1", "Value 2", "Value 3", "Value 4"],
          [
            { text: "Val 1", margin: 5 },
            { text: 1000, alignment: "right", bold: true },
            "Val 3",
            "Val 4",
          ],
        ],
      },
    },
  ];
}

{
  ul: ["list1", "list2", { text: "list3", bold: true }];
},
{
  ol: ["olist1","olist2","olist3"]
}

{
  image: 'data:image/jpeg;base64,...encodedContent...',
  width: 150,
  height: 150
},
{
  svg: '<svg width="300" height="200" viewBox="0 0 300 200">...</svg>'
}

{text: 'google', link: 'http://google.com'},
{text: 'Go to page 2', linkToPage: 2}

{
  content: [
    // basic usage
    { qr: "text in QR" },

    // colored QR
    { qr: "text in QR", foreground: "red", background: "yellow" },

    // resized QR
    { qr: "text in QR", fit: "500" },
  ];
}

import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
import htmlToPdfmake from "html-to-pdfmake";
pdfMake.vfs = pdfFonts.pdfMake.vfs;
pdfMake.fonts = {
  ipa: {
    normal: "ipagp.ttf",
    bold: "ipagp.ttf"
  }
};

export function hcloMember|| {
  const html = `
    <div>
      <h1 style="color: red;">日本語</h1>
      <table style="width: 100%; font-size: 10px">
        <tr>
          <th>お客様ID</th>
          <td>0000</td>
        </tr>
        <tr>
          <th>契約者名</th><td>テスト太郎</td>
        </tr>
        <tr>
          <th>契約者住所</th><td>大阪府大阪市２－２－３　本末ビル２F</td>
        </tr>
      </table>
    </div>`;
  const docDef = {
    content: [htmlToPdfmake(html)],
    defaultStyle: {
      font: "ipa"
    }
  };

  pdfMake.createPdf(docDef).download('htmlPdfConvert.pdf');
}