pdfmake para exportar PDF front-end

pdfmake genera pdf editando el objeto de descripción de pdf en un formato específico y pasándolo a pafmake

El pdfmake predeterminado no es compatible con chino

Cómo apoyar a los chinos

Para admitir chino, debe configurar las fuentes chinas. Según la documentación, hay dos formas: 1. Usar la configuración de fuentes en línea. 2. Utilice vfs local (sistema de archivos virtual) para configurar las fuentes. Este artículo presenta el segundo.

Los pasos descritos en la documentación:

• Instalar pdfmakenpm install pdfmake

  Instalar pdfmake

• Ir al directorio del paquete./node_modules/pdfmake/

  entrar en ./node_modules/pdfmake/el directorio

• Cree el examples/fontssubdirectorio en su directorio de código pdfmake, si aún no existe.

  examples/fontsCrear un subdirectorio bajo el directorio pdfmake

• Copie sus fuentes (y otros archivos que desee incrustar) en el examples/fontssubdirectorio.

  Coloque el archivo de caracteres .ttf que desea usar en examples/fontsel directorio, los archivos de fuentes chinas son relativamente grandes, puede ingresar a la carpeta de fuentes de la computadora, encontrar una más pequeña y colocarla o descargar la fuente que desee

• Ejecutar comando node build-vfs.js "./examples/fonts". O correr node build-vfs.jspara mostrar ayuda.

  Ejecutar en el directorio pdfmakenode build-vfs.js "./examples/fonts"

• Incluya su nuevo archivo build/vfs_fonts.js en su código (de la misma manera que incluye pdfmake.jso pdfmake.min.js).

  Luego buildse generará un archivo en la carpeta vfs_fonts.js, este archivo es el archivo de fuente que queremos usar, puede abrir este archivo, puede ver el nombre de la fuente y otra información

Arriba hemos generado fuentes chinas

cómo utilizar

// 在项目里引入pdfmake
import pdfMake from "pdfmake/build/pdfmake";

// 我把上面生成的字体放入了 vue 中的static文件夹，我使用的是FZYTK.TTF
// 这样直接引入就可以，不需要额外引入原字体文件（FZYTK.TTF）
const vfs_fonts = require('../xxx/static/vfs_fonts');
pdfMake.vfs = vfs_fonts;

// 定义字体 
pdfMake.fonts = {
    
    
    // webfont是字体名，可以自定义，下面需要用这个名字配置字体
    webfont: {
    
    
        // FZYTK.TTF 这个文件已经在 我们生成的 vfs_font.js 文件中，且已经引入，所以可以直接使用
        normal: "FZYTK.TTF",
        bold: "FZYTK.TTF",
        italics: "FZYTK.TTF",
        bolditalics: "FZYTK.TTF",
    },
    // 可以定义多个字体
    anotherFontName: {
    
    
     (...)
    },
};

// 下面我们来定义 pdfmake需要用的 pdf文件描述对象
// 这个描述对象 具体的字段可以参考官方文档
var docDefinition = {
    
    
    content: "这是一段中文。welcome to China",
    defaultStyle: {
    
    
        // 设置我们定义的字体为默认字体
        font: "webfont",
    },
};

pdfMake.createPdf(docDefinition).download("文件名", () => {
    
    
    console.log("complete");
});