[jspdf] フロントエンドHTMLからPDFを生成し、中国語フォントを導入する2つの方法

PDFをエクスポートするには2つの方法があります

1. Canvas を使用して HTML から画像を生成し、jspdf を使用して PDF を生成します。利点: 生成された pdf の復元度が非常に高い欠点: 画像形式の pdf は編集できない
2. jspdf の html メソッドを直接使用して、html から pdf を直接生成します。長所: 編集可能、短所: テキスト内容を抽出して PDF を生成するだけです。つまり、基本的にスタイルはありません。また、jspdf は中国語フォントをサポートしていません。中国語フォントがある場合は、フォントを 1 つずつインポートする必要があります。

1.写真からPDFをエクスポート

1. プラグイン html2canvas、jspdf をインストールします

 yarn add jspdf
yarn add html2canvas

2. 使用する

//html使用的是Ant Design Vue框架,pdf_content为生成canvas区域
<div ref="pdf_content">
     <a-table :loading="loading" :dataSource="dataSource" :columns="columns" :pagination="ipagination" @change="handleTableChange" /> 
</div>

// js
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'

getpdf() {
    
     // 未分页
            const pdf_content = this.$refs.pdf_content
            html2canvas(pdf_content, {
    
    backgroundColor: '#fff', useCORS: true}).then((canvas) => {
    
     // 获取图片
                const dataURL = canvas.toDataURL('image/png')
                console.log(dataURL) // 生成的图片
                var contentWidth = canvas.width
                var contentHeight = canvas.height
                // 一页pdf显示html页面生成的canvas高度;
                var pageHeight = (contentWidth / 592.28) * 841.89
                // 未生成pdf的html页面高度
                var leftHeight = contentHeight
                // 页面偏移
                var position = 0
                // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                var imgWidth = 595.28
                var imgHeight = (595.28 / contentWidth) * contentHeight
                var pageData = canvas.toDataURL('image/jpeg', 1.0)
                var pdf = new JsPDF('', 'pt', 'a4')
                // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                // 当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
    
    
                    // 在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
                    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                    // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
                } else {
    
    
                    // 分页
                    while (leftHeight > 0) {
    
    
                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight
                        position -= 841.89
                        // 避免添加空白页
                        if (leftHeight > 0) {
    
    
                        pdf.addPage()
                        }
                    }
                }
                pdf.save('订单列表')
            })
        }

3. 発生する可能性がある問題
Ant Design Vue フレームワークのページングコンポーネントのスタイルが html2canvas に影響し、下図に示すように、生成された画像のデジタル部分が欠落し、a タグ内の display: block; スタイルが原因で発生します
ここに画像の説明を挿入

。エクスポートされた画像の a タグのコンテンツが失われます。表示は成功しました。スタイルを手動で変更する必要があります。

/deep/ .ant-pagination-item a {
    
    
    display: unset;
}

2、htmlメソッドはhtmlからpdfを直接生成します。

1.フォントをインポートする

ttf to js ツールクリックしてプロジェクトをローカルにダウンロードし、以下のファイルを開きます
ここに画像の説明を挿入
fontconverter を開くと、ページは次のようになります

必要なフォントの ttf ファイルを選択し、アップロードして変換するファイルをクリックして選択します (一部のフォントは、コンピューター上のアドレス C:\Windows\Fonts にローカルにあります)。アップロード後、[作成] をクリックして js ファイルをダウンロードします
ここに画像の説明を挿入
。このファイルをプロジェクトに入れて

ページ上にインポートしますフォント：require("@/utils/simhei-normal");フォントをjsに変換する際に処理され、インポートするだけで直接使用できます

PDF生成前のpdf.setFont("simhei");フォント設定を使用するだけです

2.PDFの生成

	var pdf = new jsPDF("x", "pt", [595, 750]);
      pdf.setFont("simhei"); // 使用字体
      const source = document.getElementsByClassName("content")[0];
      var options = {
    
    
        pagesplit: false, //设置是否自动分页
        background: "#FFFFFF", //如果导出的pdf为黑色背景，需要将导出的html模块内容背景 设置成白色。
      };
      await pdf.html(source, {
    
    
        callback: function (pdf1) {
    
    
          pdf1.save("test.pdf");
        },
        margin: [30, 0, 30, 0],
      });
      pdf.save("test.pdf");