下载后解压缩文件，解压后文件目录如下：
将整个文件夹拷贝到项目public目录下的plugin文件夹下：
此时已经将pdf.js完全引入到项目中，然后在使用该功能的页面中写入：
http://mozilla.github.io/pdf.js/getting_started/#download<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的代码。
以上，结束，撒花，*★,°*:.☆(￣▽￣)/$:*.°★* 。