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>