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是一个功能丰富，易于使用的文档预览工具，非常适合用于开发各类在线文档预览功能的项目。