PDF generate with vfs_fonts [vuejs 3]

I’m studying vuejs 3 with PDF generate.

I could generate PDF file. But when I trying to
add Japanese font function doesn’t work.

I generate ‘vfs_fonts’ successfully using below step.

https://pdfmake.github.io/docs/0.1/fonts/custom-fonts-client-side/vfs/

I tried this two package ‘pdfmake’ and ‘vue3-pdfmake’ because
once I add ‘vfs_fonts’ PDF function stops.

I use vuejs 3 and composition API.
Could you teach me what is problem please?

App.js

import { PDFPlugin } from 'vue3-pdfmake';

createApp({
    components: {
        CompaniesIndex,
        PDFPlugin
    }
}).use(router).use(PDFPlugin).mount('#app');

CompaniesPdf.vue

<template>
  <button @click="onGenPDF">Gen PDF</button>
</template>

<script setup>
import { usePDF } from 'vue3-pdfmake';
//import pdfMake from "pdfmake/build/pdfmake";
//import { usePDF } from "pdfmake/build/pdfmake";

import pdfFonts from "pdfmake/build/vfs_fonts";

pdfMake.vfs = pdfFonts.pdfMake.vfs;

pdfMake.fonts = {
  Ipaex: {
        normal: 'ipaexg.ttf',
        bold:   'ipaexm.ttf'
    }
}
const defaultStyle = "Ipaex"

const pdfmake = usePDF({
  autoInstallVFS: true
})

const onGenPDF = () => {
  pdfmake.createPdf({
    content: [
      '春夏秋冬 means four season in Japanese ',
    ],
    defaultStyle: {
            font:defaultStyle
    }
  }).download();
}
</script>

Error Message

import pdfFonts from “pdfmake/build/vfs_fonts”;
^
error during build: Error: ‘default’ is not exported by >node_modules/pdfmake/build/vfs_fonts.js, imported by
resources/js/components/companies/CompaniesPdf.vue

I just solved this myself. I will post my current code.
Thank you very much for all checking my question.

<template>
  <button @click="exportPdf">Gen PDF</button>
</template>

<script setup>
import * as pdfFonts from  'pdfmake/build/vfs_fonts';
import pdfMake from "pdfmake";
pdfMake.vfs = pdfFonts.pdfMake.vfs

pdfMake.fonts = {
  Ipaex: {
      normal: 'ipaexg.ttf',
      bold:   'ipaexm.ttf'
    }
}

const defaultStyle = "Ipaex"

function exportPdf() {
    let text = [["four_season","春夏秋冬"]]
    let document = {
        content: [
            {
                table: {
                    widths: [100, 100],
                    body: text
                }
            },
        ],
        defaultStyle: {
            font:defaultStyle
        }
    }   
    pdfMake.createPdf(document).open();
}
</script>

Leave a Comment