<
script
>
const PDFJS
=
require
(
'pdfjs-dist'
)
PDFJS
.
GlobalWorkerOptions
.
workerSrc
=
'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.13.216/build/pdf.worker.js'
export default
{
data
(
)
{
return
{
pdfPages
:
''
mounted
(
)
{
this
.
getPdfUrl
(
)
methods
:
{
getPdfUrl
(
)
{
const url
=
'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
const loadingTask
=
PDFJS
.
getDocument
(
url
)
loadingTask
.
promise
.
then
(
pdf
=
>
{
this
.
pdfPages
=
pdf
.
numPages
<
/
script
>
<
style lang
=
"less"
scoped
>
.
preview
-
pdf
{
margin
:
30
px auto
;
text
-
align
:
center
;
font
-
family
:
'宋体'
;
letter
-
spacing
:
2
px
;
<
/
style
>
问题描述：页面展示多个
pdf
文件，且每个
PDF
文件有自己的分页，分页之间不会互相干扰。
问题解决方案：将分页设置为一个数组，先定义一个空的数组，然后
获取
总文件个数进行循环，每循环一次，在空数组中push当前页，总
页数
这些变量，然后在页面进行渲染。
1. 定义空数组
data () {
return {
pathList: [],
currentArr: [],
fileType: '
pdf
', // 文件类型
src: '', //
pdf
文件
<template>
<div class="wrap">
<
pdf
v-for="item in numPages" :key="item" :src="
pdf
Src" :page="item"/>
</template>
<script>
import
pdf
from '
vue
-
pdf
'
import
