pdf.js引入方式及初始化配置

最新推荐文章于 2024-09-13 21:31:54 发布

垃圾侠

最新推荐文章于 2024-09-13 21:31:54 发布

阅读量5.7k

点赞数 8

分类专栏： js vue 文章标签：大数据

本文链接：https://blog.csdn.net/xiao1215fei/article/details/125542456

版权

vue 同时被 2 个专栏收录

27 篇文章

订阅专栏

12 篇文章

订阅专栏

官方下载地址：Getting StartedA general-purpose, web standards-based platform for parsing and rendering PDFs.http://mozilla.github.io/pdf.js/getting_started/#download

下载后解压缩文件，解压后文件目录如下：

将整个文件夹拷贝到项目public目录下的plugin文件夹下：

此时已经将pdf.js完全引入到项目中，然后在使用该功能的页面中写入：

<iframe v-if="dialogVisible" :src="pdfUrl" width="100%" height="100%"></iframe>

其中通过v-if对pdf预览窗口进行重新渲染，如果没有v-if，则第二次打开同一pdf文件时，会出现pdf文件不显示的问题；

src绑定的文件地址如下：

let pdf = this.currentItem.fileUrl; 
//this.currentItem.fileUrl为后端返回的pdf文件地址
this.pdfUrl = 'plugin/pdf/web/viewer.html?file='+ pdf;

以上，就完成了pdf文件的显示功能，示例图如下：

顶部是工具栏部分，有翻页、缩放、下载、打印，以及滚动方式等等。但有些时候，我们不需要显示这么多工具，并且还可能需要设置一些初始值，比如打开pdf后，默认显示第一页，缩放比例为“实际大小”，滚动方式为“平铺滚动”，这样我们就需要通过修改pdf.js的源码来实现。

在plugin/pdf/web文件夹下，找到viewer.html文件，该文件中可以修改代码，隐藏工具栏中的部分内容。比如想要隐藏工具栏中右侧部分的所有工具，那么就找到

<div id="toolbarViewerRight">

设置style， style="display: none;"

注意：不能直接注释掉这部分代码，否则js会找不到该id，会报错；

此外的重点就是，如果设置我们想要的初始值，这里有两个文件需要修改，view.html和view.js

如我们要修改默认的缩放比例为“实际大小”，就要在view.html中找到

<span id="scaleSelectContainer" class="dropdownToolbarButton">
                  <select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="zoom">
                    <option id="pageAutoOption" title="" value="auto" data-l10n-id="page_scale_auto" style="display: none;">Automatic Zoom</option>
                    <option id="pageActualOption" title="" value="page-actual" selected="selected" data-l10n-id="page_scale_actual">Actual Size</option>
                    <option id="pageFitOption" title="" value="page-fit" data-l10n-id="page_scale_fit" style="display: none;">Page Fit</option>
                    <option id="pageWidthOption" title="" value="page-width" data-l10n-id="page_scale_width" style="display: none;">Page Width</option>
                    <option id="customScaleOption" title="" value="custom" disabled="disabled" hidden="true"></option>
                    <option title="" value="0.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 50 }'>50%</option>
                    <option title="" value="0.75" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 75 }'>75%</option>
                    <option title="" value="1" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 100 }'>100%</option>
                    <option title="" value="1.25" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 125 }'>125%</option>
                    <option title="" value="1.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 150 }'>150%</option>
                    <option title="" value="2" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 200 }'>200%</option>
                    <option title="" value="3" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 300 }'>300%</option>
                    <option title="" value="4" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 400 }'>400%</option>
                  </select>
                </span>

设置其中id为pageActualOption的option的selected="selected"，然后，还要在view.js文件中找到

const DEFAULT_SCALE_VALUE = "auto";

将其值设置为：

const DEFAULT_SCALE_VALUE = "page-actual"

这样，再次打开pdf文件时，初始的缩放就变为我们设置的“实际大小”了。

如果要修改页面的滚动方式，可以在view.html中找到这段代码：

<div id="scrollModeButtons" role="radiogroup">
              <button id="scrollPage" class="secondaryToolbarButton" title="Use Page Scrolling" tabindex="62" data-l10n-id="scroll_page" role="radio" aria-checked="false">
                <span data-l10n-id="scroll_page_label">Page Scrolling</span>
              </button>
              <button id="scrollVertical" class="secondaryToolbarButton" title="Use Vertical Scrolling" tabindex="63" data-l10n-id="scroll_vertical" role="radio" aria-checked="false">
                <span data-l10n-id="scroll_vertical_label" >Vertical Scrolling</span>
              </button>
              <button id="scrollHorizontal" class="secondaryToolbarButton" title="Use Horizontal Scrolling" tabindex="64" data-l10n-id="scroll_horizontal" role="radio" aria-checked="false">
                <span data-l10n-id="scroll_horizontal_label">Horizontal Scrolling</span>
              </button>
              <button id="scrollWrapped" class="secondaryToolbarButton toggled" title="Use Wrapped Scrolling" tabindex="65" data-l10n-id="scroll_wrapped" role="radio" aria-checked="true">
                <span data-l10n-id="scroll_wrapped_label">Wrapped Scrolling</span>
              </button>
            </div>

上面代码中，是将滚动方式设置为“平铺滚动”，即

<button id="scrollWrapped" class="secondaryToolbarButton toggled" title="Use Wrapped Scrolling" tabindex="65" data-l10n-id="scroll_wrapped" role="radio" aria-checked="true">
                <span data-l10n-id="scroll_wrapped_label">Wrapped Scrolling</span>
              </button>

上面代码与其它的区别是，class中多了一个toggled，同时后面aria-checked的值为true。

接下来修改view.js中的代码，找到：

this._scrollMode = _ui_utils.ScrollMode.VERTICAL;

将其修改为：

this._scrollMode = _ui_utils.ScrollMode.WRAPPED;

经过以上两步修改后，打开pdf文件后就会默认以“平铺滚动”方式展示了。

当一个pdf文件被访问后，再次打开时，页码会定位到上一次访问到的页码，有些场景下可能需要每次打开都显示第一页的内容，这样就需要设置打开页码始终为第一页，修改以下部分代码：

找到setInitialView函数，在其中增加一句代码：

setInitialView(storedHash, {
    rotation,
    sidebarView,
    scrollMode,
    spreadMode
  } = {}) {
    const setRotation = angle => {
      if ((0, _ui_utils.isValidRotation)(angle)) {
        this.pdfViewer.pagesRotation = angle;
      }
    };

    const setViewerModes = (scroll, spread) => {
      if ((0, _ui_utils.isValidScrollMode)(scroll)) {
        this.pdfViewer.scrollMode = scroll;
      }

      if ((0, _ui_utils.isValidSpreadMode)(spread)) {
        this.pdfViewer.spreadMode = spread;
      }
    };

    this.isInitialViewSet = true;
    this.pdfSidebar.setInitialView(sidebarView);
    setViewerModes(scrollMode, spreadMode);

    if (this.initialBookmark) {
      setRotation(this.initialRotation);
      delete this.initialRotation;
      this.pdfLinkService.setHash(this.initialBookmark);
      this.initialBookmark = null;
    } else if (storedHash) {
      setRotation(rotation);
      this.pdfLinkService.setHash(storedHash);
    }
    this.pdfViewer.currentPageNumber = 1; //设置初始页码为1，避免第二次打开时仍为上一次显示的页码；
    this.toolbar.setPageNumber(this.pdfViewer.currentPageNumber, this.pdfViewer.currentPageLabel);
    this.secondaryToolbar.setPageNumber(this.pdfViewer.currentPageNumber);

    if (!this.pdfViewer.currentScaleValue) {
      this.pdfViewer.currentScaleValue = _ui_utils.DEFAULT_SCALE_VALUE;
    }
  },

其中：this.pdfViewer.currentPageNumber = 1;这句代码就是设置初始页码为1的代码。

以上，结束，撒花，*★,°*:.☆(￣▽￣)/$:*.°★* 。