H5預覽PDF

一、H5預覽PDF文件

PDF文件是一種常見的格式，H5豐富的文本效果和交互性能讓它成為一種流行的預覽方法。下面介紹兩種實現方法：

1.基於PDF.js的方式

PDF.js是Mozilla開發的一種基於Web的PDF查看器，它可以將PDF文件轉換為HTML5，並實現在瀏覽器上的PDF預覽。在使用PDF.js時，我們可以在HTML中引入該庫，並通過JavaScript調用該庫的PDF預覽函數來實現PDF的預覽。

<script src="//cdn.bootcss.com/pdf.js/2.2.2/pdf.min.js"></script>
<script>
  // 打開PDF文件
  pdfjsLib.getDocument('//example.com/path/to/document.pdf').then(function(pdf) {
    // 獲取第一頁的PDF需要渲染的元素
    pdf.getPage(1).then(function(page) {
      // 獲取canvas元素，用於渲染PDF
      var canvas = document.getElementById('pdf-canvas');
      var canvasContext = canvas.getContext('2d');

      // 獲取PDF尺寸
      var viewport = page.getViewport(1);
      canvas.width = viewport.width;   // 設置canvas寬度
      canvas.height = viewport.height; // 設置canvas高度
      
      // 獲取PDF渲染context
      var renderContext = {
        canvasContext: canvasContext,
        viewport: viewport
      };
      
      // 渲染第一頁
      page.render(renderContext);
    });
  });
</script>

2.基於Adobe Acrobat的方式

Adobe Acrobat是一款常用的PDF編輯器，它可以將PDF文件轉換為HTML5，並提供嵌入在網頁中的PDF預覽功能。在使用Adobe Acrobat時，我們需要使用Object或者iframe嵌入PDF文件。

<object data="//example.com/path/to/document.pdf" width="100%" height="650px">
  <embed src="//example.com/path/to/document.pdf" type="application/pdf" width="100%" height="650px" />
</object>

<iframe src="//example.com/path/to/document.pdf" width="100%" height="650px"></iframe>

二、H5預覽word、Excel文件

除了PDF，Word、Excel也是十分常見的文檔格式。要實現H5預覽這兩種格式，我們可以使用Office Online Web Apps或者Google Docs。這兩種方式可以直接在瀏覽器中預覽和編輯Word和Excel文檔，可以在網頁中直接嵌入。

三、H5預覽PPT前兩頁

類似於PDF一樣，在H5中預覽PPT，也需要進行轉換。下面介紹一種可行的方式。

1.利用Microsoft Interoperability API

Microsoft Interoperability API是一組API，可以讓我們輕鬆地在網頁中預覽PPT。我們需要先將PPT文件轉換為ODP格式，再使用API進行預覽。

<iframe src='https://view.officeapps.live.com/op/view.aspx?src=//example.com/path/to/document.odp' width='100%' height='600px' frameborder='0'></iframe>

四、H5預覽中出現的問題及解決方案

1.預覽屏幕顯示不全

由於預覽的文件往往比瀏覽器窗口要大，因此有時候屏幕可能會顯示不全。此時，我們可以通過設置CSS樣式或JS實現自適應的方式來解決該問題。

html, body, div, object {
  overflow: hidden; 
  width: 100%; 
  height: 100%;
}

2.預覽以後為什麼不顯示全部

有時候，我們可能只能看到文件的前幾頁，無法查看整個文件。這是由於預覽組件在實現時限制了預覽文件的頁數。我們可以對預覽組件中的代碼進行修改，來展示完整的文件。

3.圖片選取

在預覽PDF中，我們經常需要在PDF中提取圖片，下面是兩種方案供參考：

1）使用canvas將PDF轉換為圖片

使用canvas技術將PDF文件轉換為圖片，然後進行圖片的選取和保存。

2）使用PDF.js提供的接口進行圖片的提取

// 從PDF中提取圖片
page.getOperatorList().then(function(operatorList) {
  var SVGGraphics = new pdfjsLib.SVGGraphics(page.commonObjs, page.objs);
  var SVGGenerator = new pdfjsLib.SVGGenerator();
  
  // 按照操作列表運行操作
  operatorList.forEach(function(op) {
    SVGGraphics.processOperator(op);
  });
  
  // 生成SVG XML
  var svg = SVGGenerator.getSVG(SVGGraphics.getSVG());
  
  // 從SVG XML獲取圖片的DataURL
  var imgDataURL = 'data:image/svg+xml;base64,'+window.btoa(svg);
});