要約: この記事は元々、Grape City の技術チームによって CSDN に公開されたものです。転載元を明記してください:グレープシティ公式ウェブサイト、グレープシティは、開発者に力を与えるための専門的な開発ツール、ソリューション、サービスを開発者に提供します。

序文

日常業務において、レポートの印刷や PDF へのエクスポートは頻繁に行われるタスクの 1 つです。同僚や顧客への情報伝達が容易になるだけでなく、仕事がよりプロフェッショナルで美しく、標準化されたものに見えるようになり、リーダーや顧客の信頼とサポートを得ることができます。作業者として、作業効率を向上させるために効率的なレポート処理スキルを習得することは非常に重要です。その中でも、ネイティブ JS の印刷とレポートの PDF へのエクスポート技術は、非常に実用的で効率的で、一般的に使用される方法です。ネイティブ JS 技術を使用すると、レポート処理のタスクを簡単に完了でき、面倒なサードパーティのライブラリやソフトウェアの使用を回避できるため、時間とコストを節約できます。ネイティブ JS の印刷および PDF へのレポートのエクスポートのスキルを習得するには、高度なフロントエンド開発スキルは必要ありません。必要なのは、JS の基本と DOM 操作の基本だけです。この記事では、ネイティブ JS テクニックを使用してレポートを印刷および PDF にエクスポートする方法を紹介し、レポートの処理時に発生する可能性のある問題や困難を解決するのに役立ちます。

この記事ではプログラミング環境として Visual Studio Code (以下、VSCode) というソフトウェアを使用していますので、管理者として実行してください。

この記事の内容:

1. デモの紹介

以下の図は、円グラフで表示された単純なデータレポートです。右側の 2 つのボタンは、[印刷] と [PDF のエクスポート] です。これら 2 つのボタンをクリックして、レポートを印刷し、PDF としてエクスポートします。

(デモ実行インターフェース)

(レポートを印刷)

（レポートをPDFファイルとして印刷します）

2. コード

2.1 プロジェクトファイルの作成

最初のステップは、ファイルマネージャーで空のフォルダーをプロジェクトとして作成し、VSCode で開きます。

2 番目のステップでは、3 つの空のファイル (html ファイル、CSS ファイル、JS ファイル) を作成します。名前は任意に選択できます。

[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-SE5UAjW5-1686906905871)(media/41a12989c197c14ae142db3603a72973.png)]

ここまででプロジェクトファイルの作成は完了しましたので、次にJSの準備について説明します。

2.2 JSファイルの記述

最初のステップは、テーブルにデータ情報を追加することです。

function addTableContent (sheet) {
    
    

sheet.addSpan(1, 0, 1, 7);

//设置列高

sheet.setRowHeight(1, 40);

sheet.getCell(1, 0).value("Costs").font("28px Times").foreColor("#11114f").hAlign(spreadNS.HorizontalAlign.headerLeft).vAlign(spreadNS.VerticalAlign.center);、

//合并单元格

sheet.addSpan(2, 0, 1, 7);

sheet.setRowHeight(2, 30);

//获取指定表单区域中的指定单元格

sheet.getCell(2, 0).value("Family Business").font("18px Times").foreColor("#11114f").backColor("#f5f5f5").hAlign(spreadNS.HorizontalAlign.headerLeft).vAlign(spreadNS.VerticalAlign.center);

sheet.setColumnWidth(0, 105);

sheet.setRowHeight(3, 35);

sheet.getCell(3, 0).value("Costs Elements").font("Bold 15px Times").foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.headerLeft).vAlign(spreadNS.VerticalAlign.center);

sheet.setColumnWidth(1, 70);

sheet.getCell(3, 1).value("2018").font("Bold 15px Times").foreColor("#171717").backColor("#dfe9fb").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);

sheet.setColumnWidth(2, 70);}

2 番目のステップは、円グラフを追加することです。

// 円グラフを追加するメソッド

function addPieContent(sheet) {
    
    

//合并单元格

sheet.addSpan(12, 0, 1, 4);

//获取指定表单区域中的指定单元格

sheet.getCell(12, 0).value("Total Costs").font("15px Times").foreColor("#11114f").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);

sheet.addSpan(13, 0, 9, 4);

//在单元格中指定公式

sheet.setFormula(13, 0, '=PIESPARKLINE(G5:G11,"#dfe9fb","#d1dffa","#9bbaf3","#5c7ee6","#1346a4","#102565", "#ededed")');

}

3 番目のステップは、PDF をエクスポートする方法を追加することです。

window.onload = function () {
    
    

var spread = new spreadNS.Workbook(document.getElementById("ss"));

document.getElementById('savePDF').onclick = function () {
    
    

//下载pdf的方法

spread.savePDF(

function (blob) {
    
    

//设置下载pdf的文件名

saveAs(blob, 'download.pdf');

},

console.log,

{
    
    

title: 'Test Title',

author: 'Test Author',

subject: 'Test Subject',

keywords: 'Test Keywords',

creator: 'test Creator'

});

};

var sheet = spread.getActiveSheet();

sheet.suspendPaint();

var style = new GC.Spread.Sheets.Style();

//设置字体大小

style.font = '15px Times';

sheet.setDefaultStyle(style);

//添加表格内容

addTableContent(sheet);

//添加饼图

addPieContent(sheet);

var printInfo = sheet.printInfo();

//showBorder是否打印控件的外边框线

printInfo.showBorder(true);

//showGridLine是否打印网格线

printInfo.showGridLine(true);

//headerCenter是否打印表头中心

printInfo.headerCenter("Family Business Costs");

printInfo.headerLeft("&G");

printInfo.footerCenter("&P&N");

}

4 番目のステップは、レポートを印刷する方法を追加することです。

window.onload = function () {
    
    

//打印的方法

document.getElementById('btnPrint').onclick = function () {
    
    

// used to adjust print range, should set with printInfo (refer custom print for detail)

spread.sheets[0].setText(31, 8, " ");

spread.print();

};

sheet.resumePaint();

};

ここまででJSファイルの導入は完了しましたので、以下にCSSの記述を紹介します。

2.3 CSS ファイルの記述

最初のステップは、ボタンに CSS 書式設定を追加することです。

input {
    
    

padding: 8px 14px;

display: block;

}

2 番目のステップでは、オプションコンテナーとテーブルの CSS 書式設定を追加します。

.sample-spreadsheets {
    
    

width: calc(100% - 280px);

height: 100%;

overflow: hidden;

float: left;

}

.options-container {
    
    

float: right;

width: 280px;

padding: 12px;

height: 100%;

box-sizing: border-box;

background: #fbfbfb;

overflow: auto;

}

3 番目のステップは、オプション行、サンプルチュートリアル、本文の CSS スタイルを追加することです。

input {
    
    

padding: 8px 14px;

display: block;

}

body {
    
    

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

.sample-tutorial {
    
    

position: relative;

height: 100%;

overflow: hidden;

}

ここまででCSSファイルの導入が完了しました。次にHtmlファイルの準備について説明します。

2.4 HTML ファイルの書き込み

最初のステップは、フォームをインポートし、PDF をエクスポートし、レポートリソースを印刷することです。

<head>

<meta name="spreadjs culture" content="zh-cn" />

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- 引入SpreadJS相关的CSS,默认会有一个CSSSpreadJS默认提供了7种CSS，可以选择一个适合当前项目的引入-->

<link rel="stylesheet" type="text/css" href="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">

<!-- 核心资源，最小依赖资源，只要引入了该资源，组件运行时就能显示出来 -->

<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>

<!--文件保存相关资源-->

<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/js/FileSaver.js" type="text/javascript"></script>

<!-- 打印相关资源 -->

<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script>

<!--PDF相关资源-->

<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js" type="text/javascript"></script>

<!-- 中文资源文件，组件运行时默认会用英文资源，使用中文资源需要引入并设置 -->

<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script>

</head>

2 番目のステップでは、PDF をエクスポートしてレポートを印刷するボタンを導入します。

<body>

<div class="sample-tutorial">

<div id="ss" class="sample-spreadsheets"></div>

<div class="options-container">

<p>Click this button to export the Spread component to a PDF file.</p>

<div class="option-row">

<!--导出Pdf按钮-->

<input type="button" style="height: 70px;" value="Export PDF" id="savePDF">

<hr>

<!--打印按钮-->

<input type="button" style="height: 70px;" value="Print" id="btnPrint">

</div>

</div>

</div>

</body>

2.5 コードを実行する

実行する前に、プラグイン Live Server をダウンロードしてインストールする必要があります。

(ライブサーバープラグイン)

プラグインをインストールした後、VSCode ソフトウェアを再起動し、HTML ファイル内の Open With The Live Server (ブラウザで開く) を右クリックして実行する必要があります。

3. さらなるリソース

3.1 完全なコードリソース

https://gitee.com/GrapeCity/spread-js-print-pdf (Gitee)

https://github.com/GrapeCityXA/SpreadJS-printPdf (GitHub)

3.2 その他のフォームプラグインのデモ

JavaScript の使用に加えて、Vue や React などの一般的なフレームワークで PDF の印刷やエクスポート機能を導入することもでき、それだけでなく、データバインディングやセルのパースペクティブなど、多くの高度な操作を実装することもできます。テーブルをよりインタラクティブかつインタラクティブにします。

レポートを効率的に処理し、ネイティブ JS の印刷と PDF へのレポートのエクスポートのスムーズなスキルをマスターしてください。

序文

1. デモの紹介

2. コード

2.1 プロジェクトファイルの作成

2.2 JSファイルの記述

2.3 CSS ファイルの記述

2.4 HTML ファイルの書き込み

2.5 コードを実行する

3. さらなるリソース

3.1 完全なコードリソース

3.2 その他のフォームプラグインのデモ

おすすめ