EmbedPDF一个开源的 Web PDF 查看器

首页 » 文章中心 » 站长笔记 » EmbedPDF一个开源的 Web PDF 查看器

EmbedPDF一个开源的 Web PDF 查看器，纠错能力超强，比pdf.js和adobe的api方案都强大。
能轻松集成到 React、Vue、Svelte 或原生 JavaScript 项目中，提供比 PDF.js 更现代、高性能的 PDF 预览与编辑能力。‌‌‌

官网：https://www.embedpdf.com/
开源地址：https://github.com/embedpdf/embed-pdf-viewer

原生使用，建议下载snippet-dist.zip版本。

一个例子原生方案参考：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en-us">
    <title>{$file_title}</title>
</head>
<body style="margin:0;padding:0;">
<div id="pdf-viewer" style="width:100%;height: 100vh;margin:0;padding:0;"></div>
<script type="module">
  import EmbedPDF, { ZoomMode } from '{$=#nurlpre}/{$genre}/common/assets/embedpdf@snippet@2.14.3/dist/embedpdf.js';
  const viewer = EmbedPDF.init({
    type: 'container',
    target: document.getElementById('pdf-viewer'),
    src: '{$file_url}',
    zoom: {defaultZoomLevel: ZoomMode.FitWidth},
    pan: {
      defaultMode: 'always'  // 'mobile' | 'always' | 'never'
    },
    disabledCategories: ['annotation', 'print','form','export','insert','redaction','view','document-close','document-open','page-settings','panel-comment','panel-search'],
    theme: { preference: 'system' }
  });
</script>
</body>
</html>

例子为jtbc模板代码，EmbedPDF配置中禁用了一些不常用的工具，开启默认抓手查看，文件全宽度自适应等。

EmbedPDF一个开源的 Web PDF 查看器

更多文章