使用 vfs_fonts 生成 PDF

Question

我正在研究 vuejs 3 和 PDF 生成。

我可以生成一个 PDF 文件。但当我试图 添加日文字体功能不起作用。

我使用以下步骤成功生成了“vfs_fonts”。

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

我尝试了这两个包“pdfmake”和“vue3-pdfmake”，因为 一旦我添加“vfs_fonts”PDF 功能就会停止。

我使用 vuejs 3 和组合 API。 你能教我一下问题出在哪里吗？

应用程序.js

import { PDFPlugin } from 'vue3-pdfmake';

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

公司Pdf.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>

错误信息

从“pdfmake/build/vfs_fonts”导入pdfFonts； ^ 构建期间出错：错误：“默认”未由 >node_modules/pdfmake/build/vfs_fonts.js 导出，由导入 资源/js/组件/公司/CompaniesPdf.vue

Answer 1

我刚刚自己解决了这个问题。我将发布我当前的代码。 非常感谢大家检查我的问题。

<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>