当前位置：首页 > JavaScript

js实现文档在线预览

2026-04-04 10:52:55JavaScript

实现文档在线预览的方法

使用PDF.js预览PDF文件

PDF.js是Mozilla开发的一个开源库，用于在浏览器中渲染PDF文件。通过以下代码可以实现在线预览PDF：

// 引入PDF.js库
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>

// 初始化PDF.js
pdfjsLib.getDocument('document.pdf').promise.then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport({scale: scale});

    var canvas = document.getElementById('pdf-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    page.render({
      canvasContext: context,
      viewport: viewport
    });
  });
});

使用Office Online预览Office文档

Microsoft Office Online提供了嵌入功能，可以通过iframe嵌入Office文档预览：

js实现文档在线预览

<iframe src="https://view.officeapps.live.com/op/embed.aspx?src=文档URL" width="100%" height="600px"></iframe>

使用Google Docs Viewer预览文档

Google Docs Viewer支持多种文档格式的预览，包括PDF、Word、Excel等：

js实现文档在线预览

<iframe src="https://docs.google.com/viewer?url=文档URL&embedded=true" width="100%" height="600px"></iframe>

使用纯前端库预览图片

对于图片预览，可以直接使用浏览器原生功能：

function previewImage(file) {
  var reader = new FileReader();
  reader.onload = function(e) {
    var img = document.createElement('img');
    img.src = e.target.result;
    document.body.appendChild(img);
  };
  reader.readAsDataURL(file);
}

使用Viewer.js预览多种文档

Viewer.js是一个轻量级的JavaScript库，支持多种文档格式的预览：

// 引入Viewer.js
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.1/viewer.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.1/viewer.min.js"></script>

// 初始化Viewer.js
var viewer = new Viewer(document.getElementById('images'));