序章
プロジェクトで要件が発生しました。一般的な要件は次のとおりです。ファイルをアップロードする前に、ユーザーはまずコンテンツをプレビューし、コンテンツが正しいかどうかを確認し、正しい場合はアップロードする必要があります。その後、プレビューが必要になります
。アップロード前のドキュメントの操作、以下はピットレコードを踏んだ記録です
docx-プレビュー
これは純粋な。その利点は、バックエンドに依存せずにオンラインで.docxファイルをプレビューできることです。欠点は、 doc をサポートしていないこと、 doc をサポートしていないこと、 doc をサポートしていないこと、および重要な物事は 3 回言われています;
github アドレスは次のとおりです: docx-preview、興味のある友人は公式の紹介を詳しく見ることができます。
インストール
npm install docx-preview -S
インストールが常に失敗する場合は、それを使用してインストールcnpmを
cnpm install docx-preview -S
さらに、解析する、を使用する必要があります追加解析ライブラリ jszip をインストールして導入します。ライブラリはモジュール形式ではないため、html のヘッダー タグに導入する必要があります。ファイル アドレスはhttps://unpkg.com/jszip/dist/jszip です。 min.js
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
</head>
<body>
</body>
</html>
ファイルをプロジェクトに直接ダウンロードしてプロジェクトに配置することをお勧めします。
使用
まずは公式の例を見てみましょう
<!--optional polyfill for promise-->
<script src="https://unpkg.com/promise-polyfill/dist/polyfill.min.js"></script>
<!--lib uses jszip-->
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="docx-preview.min.js"></script>
<script>
var docData = <document Blob>;
docx.renderAsync(docData, document.getElementById("container"))
.then(x => console.log("docx: finished"));
</script>
<body>
...
<div id="container"></div>
...
</body>
簡単に言うと、これには 3 つのパラメータがあり、最初のパラメータは受信したファイル データ ストリーム、2 番目のパラメータはコンテナ、そして then コールバック関数があり、これは正常に実行されますが、これだけではありません。すべての API について、これらの API はほとんど使用しないでください。これらの API をいくつか使用すれば十分です。
Vue での docx-preview の使用例
この章では、ローカルでファイルを選択し、オンラインで表示する例を実装します。一般的な手順は次のとおりです。
- docx ファイルを選択し、ファイルを取得します。
- ファイルを BLOB 形式に変換します。
- Blob 形式のデータ フロー表示を dox-preview に渡して表示します。
最初のステップは最初のステップです。HTML 部分は次のとおりです。IViewコンポーネントは同じものをUpload组件使用します。目的は、コンポーネントを通じて選択されたファイルを取得することです。element
<Upload
action
name="file"
id="file"
multiple="multiple"
:auto-upload="false"
:before-upload="init"
>
<Button size="small" type="primary">点击上传</Button>
</Upload>
ファイルを選択してから読み取ります
init(file) {
var reader = new FileReader();
reader.onload = (e) => {
};
// 传入一个参数对象即可得到基于该参数对象的文本内容
reader.readAsDataURL(file);
},
2 番目のステップでは、ファイル データを読み取り、 Blob 形式のデータ ストリームに変換します。
let arr = e.target.result.split(",");
let data = window.atob(arr[1]);
let mime = arr[0].match(/:(.*?);/)[1];
let ia = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i);
}
const blob = new Blob([ia], {
type: mime });
console.log(blob);
3番目のステップはディスプレイdocx-previewに
docx.renderAsync(blob, this.$refs.demoDocContainer).then(
(x) => {
console.log(x);
}
); // 渲染到页面
表示を完了できます。効果は次のとおりです。
完全なコードは次のとおりです
<template>
<div id="app">
<Upload
action
name="file"
id="file"
multiple="multiple"
:auto-upload="false"
:before-upload="init"
>
<Button size="small" type="primary">点击上传</Button>
</Upload>
<div class="doc-preview" ref="demoDocContainer">1</div>
</div>
</template>
<script>
let docx = require("docx-preview");
export default {
name: "docx-demo",
methods: {
init(file) {
var reader = new FileReader();
reader.onload = (e) => {
let arr = e.target.result.split(",");
let data = window.atob(arr[1]);
let mime = arr[0].match(/:(.*?);/)[1];
let ia = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i);
}
const blob = new Blob([ia], {
type: mime });
docx.renderAsync(blob, this.$refs.demoDocContainer).then(
(x) => {
console.log(x);
}
); // 渲染到页面
};
// 传入一个参数对象即可得到基于该参数对象的文本内容
reader.readAsDataURL(file);
},
},
};
</script>
<style lang="less">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.doc-preview {
width: 100%;
height: 800px;
background-color: #f5f5f5;
}
</style>
エラー処理
次のような use の使用中にエラーが発生しました
後で、選択したファイル形式doc格式が であった。このコンポーネントが認識できるのは docx 形式のみであり、doc 形式の単語認識をサポートしていないことを強調しておきます。
doc形式の認識
doc 形式のファイルを識別する必要がある場合、純粋なフロントエンドは機能しないはずです (主に適切な方法が見つからないためです。研究して作品を生きた偉人がいる場合は、メッセージを残してください)教えてください、ありがとうございます）ので、次のいずれでも構いません。この方法にはバックグラウンドの協力が必要であり、一般的な方法は次のとおりです。
PDF 形式に変換する
タイトルの通り、doc形式のファイルをバックグラウンドに渡し、バックグラウンドがそれを取得した後、PDF形式に変換すると便利です フロントはpdfjsのpdfjsような、具体的な使い方は公式サイトで見ることができます、
ダウンロードする場合は公式サイトからダウンロードするか、インストールしてくださいそれはnpm上で
もちろん、pdfjs 以外にも、 を介して表示するiframe方法もあります。この方法は、より簡単ですが、少し原始的で、正直に言うと、これまで w3c では推奨されIframeていませんでしたが使いやすいです。例えば今なら以下のような使い方になります。
<iframe :src="url"></iframe>
URLは背景にあるファイルのアドレスですが、iframeの特性上、パスで表示されているファイルを直接エリアに表示することも可能です...
まとめ
doc ファイルを認識する必要がない場合は、オンラインdocx-previewでが、 doc との互換性が必要な場合は、PDF 形式に変換して、または他のライブラリ ファイルでプレビューするpdfjsことをお勧めします。Iframe