PDF generate with vfs_fonts

Question

I'm studying vuejs 3 with PDF generate.

I could generate a PDF file. But when I am 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 the 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

Answer 1

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>