ViewerJS使用詳解

ViewerJS是一款基於HTML5的開源文檔預覽工具，它能夠預覽各種文檔類型，如PDF、PPT、ODT等，並且不需要任何插件或第三方軟體的支持。本文將從官網、打開Excel文檔、點擊兩次、打開word文檔、插件顯示動態圖片、預覽office文檔等多個方面對ViewerJS做詳細的闡述。

一、官網

ViewerJS官網（https://viewerjs.org/）提供了ViewerJS的完整介紹和使用文檔，同時也提供了Demo演示和源代碼下載。下面是如何在自己的網頁中使用ViewerJS的簡要步驟：

<script src="path/to/viewerjs.js"></script>
<div class="document">
    <iframe src="path/to/your/document" frameborder="0"></iframe>
</div>
<script>
    var viewer = new Viewer(document.querySelector('.document'), {
        title: 'Custom title',
        toolbar: true,
        navbar: true,
        tooltip: true,
        movable: true,
        zoomable: true,
        rotatable: true,
        scalable: true,
        transition: true,
    });
</script>

上述代碼中，首先載入viewerjs.js文件，然後定義一個展示文檔的div，在該div中放入iframe標籤並指定文檔路徑，最後用JavaScript代碼啟用ViewerJS插件即可。

二、打開Excel文檔

使用ViewerJS打開Excel文檔也非常簡單，只需要將Excel文件轉換成ODS格式即可預覽。下面是一個將Excel文件轉換成ODS格式的示例代碼：

import OpenPyxl from 'openpyxl';
import ODSWriter from 'odswriter';

const workbook = OpenPyxl.loadWorkbook('./test.xlsx');
const sheet = workbook.getSheetByName('test');

const ods = new ODSWriter();
ods.setAuthor('Author');
ods.setLicense('License');
ods.setTitle('Title');
ods.setSubject('Subject');

const rows = sheet.getAllCells();
for (let i = 0; i < rows.length; i++) {
  const row = rows[i];
  const cells = [];
  for (let j = 0; j < row.length; j++) {
    cells.push(row[j].value);
  }
  ods.addRow(cells);
}

const zip = ods.generateZip();
const odsContent = await zip.generateAsync({ type: 'uint8array' });
const blob = new Blob([odsContent], { type: 'application/vnd.oasis.opendocument.spreadsheet' });
const url = window.URL.createObjectURL(blob);

const iframe = document.createElement('iframe');
iframe.src = url;
document.body.appendChild(iframe);

上述代碼中，我們使用OpenPyxl將Excel文件讀取進來，並使用ODSWrtier將其寫入ODS格式，最後將ODS格式的內容轉換成Blob對象，啟用iframe即可在瀏覽器中預覽Excel文檔。

三、點擊兩次

ViewerJS提供了特定功能，例如點擊兩次頁面區域放大縮小，如何啟用該功能呢？

var viewer = new Viewer(document.querySelector('.document'), {
    title: 'Custom title',
    toolbar: true,
    navbar: true,
    tooltip: true,
    movable: true,
    zoomable: true,
    rotatable: true,
    scalable: true,
    transition: true,
    // 雙擊放大
    viewed() {
        viewer.zoomTo(viewer.imageData.naturalWidth * 2, viewer.imageData.naturalHeight * 2);
    },
});

在上述代碼中，我們先設置好一般性的參數，之後在viewed回調函數中，通過zoomTo函數將展示圖片的大小放大兩倍。這樣點擊兩次就會出現放大縮小的效果。

四、打開word文檔

使用ViewerJS打開word文檔同樣需要將word文件轉換成ODT格式。下面是將docx格式的word文檔轉換為ODT格式的示例代碼：

const mammoth = require("mammoth");

async function convertDocxToOdt(path) {
  const result = await mammoth.convertToHtml({ path });
  const { value } = result;
  return value;
}

const html = await convertDocxToOdt('./test.docx');
const blob = new Blob([html], { type: 'application/vnd.oasis.opendocument.text' });
const url = window.URL.createObjectURL(blob);

const iframe = document.createElement('iframe');
iframe.src = url;
document.body.appendChild(iframe);

上述代碼中，我們使用mammoth將docx格式的word文檔轉換成HTML格式，之後將HTML代碼轉換成Blob對象即可預覽word文檔。

五、插件顯示動態圖片

ViewerJS提供了插件功能，我們可以在頁面元素上插入各種效果和動態圖片。下面是如何使用ViewerJS的插件。

var viewer = new Viewer(document.querySelector('.document'), {
    title: 'Custom title',
    toolbar: true,
    navbar: true,
    tooltip: true,
    movable: true,
    zoomable: true,
    rotatable: true,
    scalable: true,
    transition: true,
});
viewer.addPlugin({
    // 插件名稱
    name: 'my-plugin',
    // 插件版本
    version: '0.0.1',
    // 插件初始化
    init() {
      const img = document.createElement('img');
      img.src = './image.gif';
      img.style.position = 'absolute';
      img.style.zIndex = 9999;
      img.style.top = '50%';
      img.style.right = '50%';
      document.body.appendChild(img);
    },
});

在上述代碼中，我們定義了一個名為my-plugin的插件，用到的是ViewerJS的addPlugin方法來添加插件。在插件的初始化函數中，我們定義了一個動態圖片並插入到頁面元素中。

六、預覽office文檔

使用ViewerJS預覽office文檔需要將office文件轉換成相應的格式，例如PDF、ODT等。下面是office文件轉PDF格式的示例代碼：

const fs = require("fs");
const libre = require("libreoffice-convert");
 
async function convertOfficeToPdf(path) {
  const file = fs.readFileSync(path);
  const ext = path.substring(path.lastIndexOf('.') + 1);
  const pdf = await libre.convert(file, "." + ext, undefined, pdf);

  const url = window.URL.createObjectURL(new Blob([pdf.buffer], { type: "application/pdf" }));
  const iframe = document.createElement('iframe');
  iframe.src = url;
  document.body.appendChild(iframe);
}

await convertOfficeToPdf('./test.pptx');

在上述代碼中，我們使用libreoffice-convert將PPTX格式的office文件轉換為PDF格式，最後通過Blob對象將PDF內容展示在頁面上。

七、總結

本文從官網、打開Excel文檔、點擊兩次、打開word文檔、插件顯示動態圖片、預覽office文檔等多個方面對ViewerJS做了詳細的闡述。ViewerJS是一個功能豐富，易於使用的文檔預覽工具，非常適合用於開發各類在線文檔預覽功能的項目。