フロントエンド PDF エクスポート用の pdfmake

pdfmake は、pdf 記述オブジェクトを特定の形式で編集し、pafmake に渡すことによって pdf を生成します。

デフォルトの pdfmake は中国語をサポートしていません

中国語をサポートする方法

中国語をサポートするには、中国語フォントを構成する必要があります。ドキュメントによると、次の 2 つの方法があります。 1. オンライン フォント設定を使用します。2. ローカル vfs (仮想ファイル システム) を使用してフォントを構成します。この記事では2つ目を紹介します。

ドキュメントに記載されている手順は次のとおりです。

• pdfmakeをインストールするnpm install pdfmake

  pdfmakeをインストールする

• パッケージディレクトリに移動します./node_modules/pdfmake/

  ./node_modules/pdfmake/ディレクトリに入る

• examples/fontspdfmake コード ディレクトリにサブディレクトリが存在しない場合は、サブディレクトリを作成します。

  pdfmake ディレクトリの下にexamples/fontsサブディレクトリを作成します。

• フォント (および埋め込みたいその他のファイル) をexamples/fontsサブディレクトリにコピーします。

  使用したい文字の .ttf ファイルをexamples/fontsディレクトリに置きます。中国語のフォント ファイルは比較的大きいので、コンピュータのフォント フォルダに入り、小さいものを見つけてそこに入れるか、必要なフォントをダウンロードします。

• コマンドを実行しますnode build-vfs.js "./examples/fonts"。または、実行してnode build-vfs.jsヘルプを表示します。

  pdfmakeディレクトリで実行node build-vfs.js "./examples/fonts"

• 新しいbuild/vfs_fonts.jsファイルをコードに含めます (pdfmake.jsまたは を含めるのと同じ方法pdfmake.min.js)。

  次に、buildフォルダーの下にファイルが生成されますvfs_fonts.js。このファイルは使用したいフォントファイルです。このファイルを開くと、フォント名とその他の情報が表示されます。

上記では中国語フォントを生成しました

使い方

// 在项目里引入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");
});