オンラインドキュメントプレビューの実装については、前回の記事で述べた2つの実装方法があります。
1. 文書を画像に変換：詳細は「文書のオンラインプレビュー (1) txt、word、pdf を画像に変換してオンラインプレビュー機能」を参照してください。
2. ドキュメントを HTML に変換: 詳細については、「ドキュメントのオンライン プレビュー (2) Word および PDF ファイルを HTML に変換してオンライン ドキュメント プレビューを実現する」を参照してください。
実際、これら 2 つの実装方法に加えて、関連するオンライン プレビュー コンポーネントを使用してフロントエンドでプレビューを実装する別の一般的な方法があります。
実行計画
インターネット上で実装ソリューションを検索したところ、実装可能なオープン ソース コンポーネントがかなりの数あることがわかりました。これらのオープン ソース コンポーネントを整理して、以下の表にまとめました。それらの一部は、Vue 経由で直接 Vue に導入できます。 npm。
| 文書形式 | 関連するオープンソース コンポーネント |
|---|---|
| ワード(docx) | docx-preview、マンモス |
| pdf.js、pdfobject.js、vue-pdf | |
| エクセル | Sheetjs js-xlsx、canvas-datagrid、handsontable、DataTables |
| パワーポイント（pptx） | pptxjs |
1. docx ファイルのフロントエンド プレビューを実装する
1、docx-プレビュー
これは純粋なフロントエンド JavaScript ライブラリであり、バックエンドで .docx ファイルをオンラインでプレビューできることが利点ですが、欠点は .doc をサポートしていないことです(強調追加)。
github アドレス: https://github.com/VolodymyrBaydalka/docxjs
インストール：
npm install docx-preview -S
効果：
2、マンモス
Mammoth は、.docx ドキュメントを取得して HTML に変換することで機能します。Mammoth 変換プロセスでは、中央揃えや最初の行のインデントなどの複雑なスタイルは無視され、.docx ドキュメントのみも変換できることに注意してください。
Github アドレス: https://github.com/mwilliamson/mammoth.js
インストール：
npm install mammoth
2. PDF ファイルのフロントエンド プレビュー
1、pdf.js
pdf.js は非常に優れた PDF 解析ツールです。実際、Firefox ブラウザ コアに付属する PDF プレビュー パーサーは pdf.js です。Firefox を使用して PDF ファイルを開き、F12 キーを押してコンソールを開いてソース コードを表示します. 内容。
公式サイトアドレス：PDF.js
Github アドレス: https://github.com/mozilla/pdf.js
効果：
2、pdfobject.js
PDFObject.js - ページ全体を占有するのではなく、PDF を div に埋め込みます。ブラウザは PDF の表示をサポートする必要があります (すべての主要なブラウザがサポートしています)。ブラウザが PDF をサポートしていない場合は、PDF を設定することによっても実現できます。 js
公式 Web サイトのアドレス: PDFObject: PDF を埋め込むための JavaScript ユーティリティ
github アドレス: https://github.com/pipwerks/PDFObject
実現効果：
3、vue-pdf
Vue-pdf は、pdf.js コンポーネントをベースに PDF ファイルの表示・操作・生成を Vue 上で実装するコンポーネントです。
github アドレス: https://github.com/FranckFreiburger/vue-pdf
インストール：
npm install --save vue-pdf
実現効果：
4、iframe / オブジェクト / 埋め込み
iframe / object / embed の使用方法と効果は同じです つまり、この 3 つの HTML タグに pdf がプラグインとして埋め込まれます 以下では iframe を例にします 効果は PDF ファイルを開いたのと同じですリンクを直接使用すると、新しいページが現在のページに埋め込まれます。
<iframe style="width: 100%; height: 100%;" src="/static/xxx.pdf"></iframe>
実現効果：
3. Excel ファイルのフロントエンド プレビュー
1、sheetjs js-xlsx
js-xlsx は、sheetJS によって作成された、さまざまな ecxel の読み取りとエクスポートを行うためのツール ライブラリであり、非常に強力です。
xlsx 公式ドキュメント: xlsx - npm
github リポジトリ: https://github.com/SheetJS/sheetjs
インストール：
npm install xlsx
js-xlsx はバイナリ ストリーム モードを使用して Excel テーブル オブジェクト全体を読み取ることができます
let workbook = XLSX.read(data, { type: "array" }); //表格对象
let sheetNames = workbook.SheetNames; //获取到所有表格
let worksheet = workbook.Sheets[sheetNames[0]]; //取第一张表
テーブルデータを取得したら、js-xlsxが提供するメソッドを呼び出してテーブルデータを直接HTMLコードに変換し、指定したコンテナにHTMLコードを描画します。
let html = XLSX.utils.sheet_to_html(worksheet);
実現効果：
2、キャンバスデータグリッド
キャンバスに基づいたテーブルのレンダリングは、テーブルのフィルタリング、データ編集、カスタム操作メニュー、ビッグ データ シーンの最適化、テーマ スタイルの変更をサポートします。
github アドレス: https://github.com/TonyGermaneri/canvas-datagrid
インストール：
npm install canvas-datagrid
3、ハンズオン可能
Handsontable は DOM 要素に基づいてテーブルをレンダリングします。強力で、canvas-datagrid` でサポートされるすべての機能をサポートし、テーマ スタイルの拡張がより便利です。
公式 Web サイトのアドレス:チュートリアル: カスタム ビルド - Handsontable Documentation
Github アドレス: https://github.com/handsontable/handsontable
ドキュメントのアドレス: JavaScript Data Grid - Documentation | Handsontable
インストール：
npm install handsontable @handsontable/vue
実現効果：
4、データテーブル
Jquery テーブル プラグイン DataTables をベースにしたテーブル プラグイン。まだ Jquery を使用している場合は、これを検討してください。
公式サイトアドレス：https: //www.datatables.net
インストール：
公式サイトのダウンロードアドレス. プロジェクトで DataTables を使用するには、jQuery ライブラリ、DataTables コア js ファイル、DataTables css ファイルの 3 つのファイルを導入するだけで済みます。場合によっては、DataTables スタイルのリソースが必要になることもあります。
<link href="DataTables/datatables.min.css" rel="stylesheet"/>
<script src="DataTables/datatables.min.js"></script>
使い方：
$('#example').DataTable( {
data: data
} );
4. pptx ファイルのフロントエンド プレビュー
1、PPTXJS
PPTXJSは jquery 用のプラグインで、主な機能はオンライン表示用に pptx を html に変換することです。
公式サイトアドレス：PPTXjs
github アドレス: https://github.com/meshesha/PPTXjs
使用例：
<div id="slide-resolte-contaniner" ></div>
<script>
$("#slide-resolte-contaniner").pptxToHtml({
pptxFileUrl: "Sample_demo1.pptx",
slidesScale: "50%",
slideMode: false,
keyBoardShortCut: false
});
</script>
実現効果：
要約する
この記事では主に、Word、Excel、PDF、PPT、その他のファイルの純粋なフロントエンドのオンライン プレビュー方法を紹介します。
1. フロントエンドは、さまざまなファイルタイプに応じて、オンラインプレビューに対応するオンラインプレビューコンポーネントを使用します。
フロントエンドは、さまざまなファイルタイプを判断し、対応するオンラインプレビューコンポーネントを使用してオンラインプレビューを実行します。オンライン プレビュー コンポーネントの種類が異なれば、使用時のプレビュー インターフェイスも異なるため、より完璧にする必要がある場合は、使用するすべてのコンポーネントをオンライン プレビュー UI インターフェイスにカプセル化することが最善です。
2. バックエンドが協力して、異なる形式のファイルを pdf に変換し、統一されたファイル形式に変換し、フロントエンドがプレビュー効果を実現します。
この記事のテスト結果から、フロントエンドのプレビュー効果が最も優れているのは PDF であることがわかり、文字化けや文字化けの問題は発生せず、ファイルのスタイル効果もある程度保持できます。フロントエンドは 1 つのファイル形式のプレビューのみをサポートするため、作業負荷も大幅に軽減されます。
以上が、jsフロントエンドを使用してword、excel、pdf、pptなどのファイルのオンラインプレビューを実現する方法の全内容です。