シーン
最近の作品では、開発ドキュメントをアップロードして新しいウィンドウでプレビューを開く機能が追加されました。ここにあなたの旅を記録してください。
方法
Excelをプレビューする2つの方法を試しましたが、どちらも実現できます。また、KKfileviewと呼ばれるバックエンドの連携を必要とするメソッドが実現できることも判明した。
1. luckyexcel プラグインを使用して xlsx のプレビューを実現します
2. ファイルビューアプラグインを使用してxlsxのプレビューを実現します
3. KKfileviewプラグインを使用してxlsxのプレビューを実現します
達成
方法 1: luckyExcel プラグインを使用する
注意: luckysheet と luckyexcel を使用する必要があります。落とし穴を踏まないように、以下の手順に従ってください。たとえば、window.luckysheet が定義されていないという問題がコンソールに赤く表示されることがありました。
ステップ 1: Vue プロジェクトは、luckysheet の関連する依存関係を導入します (これは、これが導入されていない場合、赤い window.luckysheet が見つからないと報告するという上記の問題でもあります)
publicフォルダ配下のindex.htmlには、luckysheet関連の依存関係が紹介されているので、作成したプロジェクトがイントラネット上に展開される可能性を考慮し、それらの依存パッケージをpublicフォルダ配下のstaticフォルダに入れて新規作成します。これらの依存パッケージのソースは、まず npm install luckysheet --save を実行してパッケージをプルダウンし、それからコピーします。ファイルの保存場所とインポートコードを次の図に示します。もちろん、cdn インポートの方法を選択することもできます。
<link rel='stylesheet' href='./static/luckysheet/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./static/luckysheet/plugins/plugins.css' />
<link rel='stylesheet' href='./static/luckysheet/css/luckysheet.css' />
<link rel='stylesheet' href='./static/luckysheet/assets/iconfont/iconfont.css' />
<script src="./static/luckysheet/plugins/js/plugin.js"></script>
<script src="./static/luckysheet/luckysheet.umd.js"></script>
ステップ 2: luckyExcel をインストールする
npm install luckyexcel --save
ステップ 3: 新しいウィンドウが開くので、新しいウィンドウの vue ファイルに luckyexcel を導入し、ロジックを処理します
html部分
ここで注意する必要があるのは、後のレンダリングで使用するIDを書き込むことと、スタイルを書くことです。最初に書かないと、ファイルが読み込まれていることがわかります。正常に完了しましたが、ページには表示されません。
<template>
<div>
<div v-if="fileType === 'xlsx'" id="luckysheet" style="margin:0px;padding:0px;width:100%;height:100vh;" />
</div>
</template>
js部分
import LuckyExcel from 'luckyexcel'; // 引入
// mounted生命周期
mounted() {
// 从路由地址中获取fileUrl,fileType
this.fileUrl = this.$route.query.fileUrl ? this.$route.query.fileUrl : null
this.fileType = this.$route.query.fileType ? this.$route.query.fileType : null
if (this.fileUrl == null) {
this.$message({
type: 'error',
message: '文件地址无效，请刷新后重试'
})
}
// 加载文件内容
this.uploading(this.fileUrl)
}
// methods方法
methods: {
// 加载文件内容
uploading(file) {
// downloadFileXLS是接口，fileKey传的是文件地址，调接口获取文件流
downloadFileXLS({
fileKey: file}).then(res => {
if(this.fileType === 'xlsx') {
// 预览xlsx
this.displayResult(res)
} else if(this.fileType === 'pptx') {
// 预览pptx，可忽略，该篇文章不涉及pptx的预览
this.previewPptx(res)
}
})
},
displayResult(buffer) {
// 得到xlsx文件流后
LuckyExcel.transformExcelToLucky(
buffer,
function(exportJson, luckysheetfile){
// console.log(exportJson);
// console.log(luckysheetfile);
if (exportJson.sheets == null || exportJson.sheets.length == 0) {
alert("文件读取失败!");
return;
}
// 销毁原来的表格
window.luckysheet.destroy();
// 重新创建新表格
window.luckysheet.create({
container: 'luckysheet', // 设定DOM容器的id
showtoolbar: false, // 是否显示工具栏
showinfobar: false, // 是否显示顶部信息栏
showstatisticBar: false, // 是否显示底部计数栏
sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
allowEdit: false, // 是否允许前台编辑
enableAddRow: false, // 是否允许增加行
enableAddCol: false, // 是否允许增加列
sheetFormulaBar: false, // 是否显示公式栏
enableAddBackTop: false, //返回头部按钮
data: exportJson.sheets, //表格内容
title: exportJson.info.name //表格标题
});
},
function(error){
// 如果抛出任何错误，则处理错误
}
)
}
}
新しいウィンドウでプレビュー xlsx を開き、次のメソッドを使用して、パラメーターを指定してプレビューするページのルートにジャンプします (3 番目のステップのコードはページをプレビューするコードです)。
// 获取目标路由地址
const routeUrl = this.$router.resolve({
name: 'OfficeView',
query: {
fileUrl: item.fileKey,
fileType: item.type
}
})
// 打开新标签页
window.open(routeUrl.href, '_blank')
方法 2: ファイルビューアを使用して Excel のプレビューを実現する
以下のリンクをクリックして、
vue プロジェクトのプレビュー Excel フォーム (ファイル ビューアー プラグイン)を表示します。