【Vueの実用的な機能】 Vueはドキュメントのオンラインプレビュー機能、PDF、Word、Excel、pptなどのオフィスファイルのオンラインプレビュー機能を実現します。

記事ディレクトリ

@[TOC](記事の目次)

方法 1. ラッキーシートのプレビュー

方法 2. Office Web Viewer (Microsoft の開発インターフェイス)

方法 3、XDOC ドキュメントプレビュークラウドサービス (プレビュー pdf、word、xls、ppt)

方法 1. ラッキーシートのプレビュー

Luckysheet は、Excel に似たオンラインスプレッドシートで、強力で、構成が簡単で、完全にオープンソースです。
Luckysheet のインストール
1. CDN から依存関係をインポートする
Luckysheet はモジュール開発をまだリリースしていないため、npm を使用できないため、関連ファイルを手動で VUE プロジェクトにインポートする必要があります。public/index.html ファイルを編集して、次のコードを追加します。

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

2. テーブルコンテナを指定する

<!-- 表格基本样式 -->
<template>
  <div class="hello">
    <div id="mysheet" style="margin:0px;padding:0px;width:100%;height:100vh;"></div>
  </div>
</template>
 
<script>
 
export default {
      
      
  name: 'HelloWorld',
  props: {
      
      
    msg: String
  },
  data() {
      
      
  },
  mounted() {
      
      
      // 创建表格
      window.luckysheet.create({
      
      
          container: 'mysheet' // 设定表格容器的id
      });
  },
  methods: {
      
      
  } 
}
</script>

ここに画像の説明を挿入
3. Luckyexcel のインストール
注: Luckyexcel は .xlsx 形式のデータのみを読み取ることができ、.xls 形式のデータを読み取ることはできません。

npm install luckyexcel

4. 完全なコード

注: xlsx ファイルを wps で作成すると、埋め込まれた画像が正常に表示されず、代わりに =DISPIMG("Picture 1(1)",1) のようなテキストが表示されます
。
理由: WPS フォームに挿入された埋め込み画像が =DISPIMG 形式 (wps 独自の機能) であり、vshape ではなく、shapes
コレクションに見つからず、 wps の et 形式。
解決策: wps を右クリックしてフローティング画像に切り替えます

<template>

  <div class="hello">
    <div id="mysheet" style="margin:0px;padding:0px;width:100%;height:100vh;"></div>
  </div>
</template>

<script>
  import LuckyExcel from 'luckyexcel'
  export default {
      
      
    name: 'about',
    props: {
      
      
      msg: String
    },
    data() {
      
      },
    mounted() {
      
      
      // 创建表格
      // window.luckysheet.create({
      
      
      //   container: 'mysheet' // 设定DOM容器的id
      // });
      // 加载 excel 文件
      LuckyExcel.transformExcelToLuckyByUrl(
        "http://celiang.oss-cn-hangzhou.aliyuncs.com/measurement/2022-05/30/zG4ZPphpTiDPkG1653875854220530.xlsm",
        "", (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: 'mysheet', // 设定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 //表格标题
          });
        });
    },
    methods: {
      
      }
  }
</script>

ここに画像の説明を挿入

方法 2. Office Web Viewer (Microsoft の開発インターフェイス)

Word、PowerPoint、または Excel ファイルをブラウザーで直接開き、ダウンロードリンクを Office Web Viewer リンクに変換して、Web サイトまたはブログで使用できるようにします。注: SharePoint 2019 では、挿入可能なファイルの種類は Word、Excel、および PowerPoint (、.doc
、. docx、.xls、.xlsx、.pot、.potx、.ppt、および .pptx)。
アドバンテージ

Office を使用せずに Office ファイルを直接表示する
モバイル端末とPCに適用
ファイルをダウンロードせずにブラウザで
Vue プレビューの word、excel、pptx、pdf ファイルを表示する

let docUrl = 'https://aaaaaa.com/file/download?filename=file.obj_id'
let url = encodeURIComponent(docUrl)
let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+url
// 在新窗口打开编码后 的链接
window.open(officeUrl,'_target')

方法 3、XDOC ドキュメントプレビュークラウドサービス (プレビュー pdf、word、xls、ppt)

XDOC ドキュメントプレビュークラウドサービス
注意：文档地址要用utf-8编码，并且外网可访问。
の利点:

ドキュメントの URL を渡すだけで、コンテンツに基づいてドキュメントの形式を自動的に識別します
効率的で高速なリアルタイムプレビュー、繰り返されるリクエストに対する 0 ミリ秒の応答
コンテンツ表示にはHTML5を採用し、PCとモバイル端末に同時に対応
PDF、OFD、DOC/X、XLS/X、PPT/X、JPG、MP4、その他のドキュメント形式をサポート

呼び出し方法

https://view.xdocin.com/view?src=文档地址

JS 呼び出し:
https://view.xdocin.com/view?src=https%3A%2F%2Fview.xdocin.com%2Fdemo%2Fview.docx

JS 呼び出し (透かし付き):

window.open("https://view.xdocin.com/view?src=" + encodeURIComponent("https://view.xdocin.com/demo/view.docx") + "&watermark=" + encodeURIComponent("view.xdocin.com"));

オプションのパラメータ

&pdf=true、Word 文書は PDF モードで表示しようとします。デフォルトは false です

&watermark=透かしテキスト, 表示テキストの透かし; "img:"+image url は画像の透かしを示します。例: img:https://view.xdocin.com/demo/wm.png

&saveable=true、ソースファイルの保存を許可するかどうか、デフォルトは false

&printable=false、印刷を許可するかどうか、デフォルトは true

©able=false、コンテンツのコピーを選択できるようにするかどうか、デフォルトは true

&toolbar=false、下部ツールバーを表示するかどうか、デフォルトは true

&title=カスタムタイトル

&expire=30、プレビューリンクの有効期間 (分単位)。デフォルトは永続的です。

&limit=、次のようにページ数を制限します。「5」は最初の 5 ページのみを表示することを意味し、「2,5」は 2 ページ目から始まる 5 ページを意味し、pdf/doc/docx/ppt/pptx に有効です。

&filename=filename、ドキュメント形式の識別に役立ちます

&fontsize=フォントサイズ (単位 px)、デフォルト 14、範囲: 6~58

&mtime=ファイル変更タイムスタンプ (例: 1633093801、秒単位の精度) または変更時間 (例: 2021-10-01 21:10:01)、キャッシュを更新するために値が変更されます