前端实现PDF预览

Foxit PDF SDK for Web

这是一款商业SDK产品，支持在前端对本地/在线PDF文档进行层删改查的操作。相较于一些开源的PDF库来说功能上更加强大稳定。

代码

vue3示例

<script setup>
import '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.css';
import * as UIExtension from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.full.js';
import preloadJrWorker from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/preload-jr-worker.js';
import {onMounted} from 'vue';

onMounted(() => {
  const licenseSN = 'xxx';
  const licenseKey = 'xxx';

  const readyWorker = preloadJrWorker({
    workerPath: '/FoxitPDFSDKForWeb/lib/',
    enginePath: '../lib/jr-engine/gsdk',
    fontPath: 'http://webpdf.foxitsoftware.com/webfonts/',
    licenseSN: licenseSN,
    licenseKey: licenseKey
  });

  const PDFUI = UIExtension.PDFUI;
  const pdfui = new PDFUI({
    viewerOptions: {
      libPath: '/FoxitPDFSDKForWeb/lib',
      jr: {
        readyWorker: readyWorker
      }
    },
    renderTo: '#pdf-ui',
    appearance: UIExtension.appearances.adaptive,
    fragments: [],
    addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile ?
        '/FoxitPDFSDKForWeb/lib/uix-addons/allInOne.mobile.js' :
        '/FoxitPDFSDKForWeb/lib/uix-addons/allInOne.js'
  });

  pdfui.openPDFByHttpRangeRequest({
    range: {
      url: '/FoxitPDFSDKforWeb_DemoGuide.pdf',
    }
  }, {fileName: 'FoxitPDFSDKforWeb_DemoGuide.pdf'});


});
</script>

<template>
  <div class="fv__ui-nav">
    <div class="fv__ui-nav-logo">
      <i class="fv__icon-logo"></i>
    </div>
  </div>
  <div id="pdf-ui"></div>
</template>

效果

使用方式有两种一种就是如代码所示，使用UIExtension来加载PDF，就如同效果中展示的是一个完整的编辑器界面的功能，你只需要对页面中的组件进行改动即可快速完成自己的业务需求。

还有一种方式是使用SDK中的PDFViewCtrl来完成PDF的预览，但其他功能那个就需要开发者结合PDFViewCtrl的各种事件来完成自己的业务需求了。