pdfjs-dist(2.3.200版本)在vue2.0+element项目的上传附件功能中获取pdf页数进行限制

项目场景：

项目场景：上传+文件大小限制这个参考element自带的功能就行，本文主要讲述如何通过AI大模型问答方式处理pdfjs-dist的安装及使用过程中遇到问题的解决方式，使用低版本是因为有业务人员仍然使用低版本浏览器。

---

组件安装

这个是安装指定版本的pdfjs-dist组件，之后文章讲的也是2.3.2版本的事情。pdfjs-dist最新的4+版本是.mjs的（也可能是我安装错了）需要重新编译为.js格式才能用（我不会 -_-||）

npm install pdfjs-dist@2.3.200

之后引入需要用到的地方，因为我是写了公用组件，所以懒得在main.js里导了，直接哪里需要导哪里

import * as pdfjsLib from 'pdfjs-dist/build/pdf'

使用组件

1、获取用户选择的第一个文件对象，并将其存储在file变量中

let file = event.target.files[0]

 2、使用pdfjsLib自带的getDocument()方法实现页数获取，但是不能直接使用，否则会报错

pdfjs-dist报错：Error: Invalid parameter object: need either .data, .range or .url

参考文档：pdfjsLib.getDocument(pdfBlob) getDocument可以解析Blob报错 Error: Invalid parameter object: need either .data, .range or .url - CSDN文库

这就是参数类型不对，getDocument需要的类型是data、range和url，而我们上面通过“event.target.files[0]”获取的是Blob类型的，如图：

而pdfjs内部的方法为：

如果不是这三种就会报错，所以在使用file的时候需要转一下格式，将Blob改完URL，方法为：

let file = event.target.files[0]
let pdfurl = URL.createObjectURL(file)

3、最后正常使用getDocument方法（这个方法是需要promise的，如果是和我一样需要等待页数结果出来，一定记得把后续方法放到.then里）

正确：

console.log('第一步')
pdfjsLib.getDocument(pdfurl).promise.then(pdf => {
    console.log('pdf页数', pdf.numPages)
    console.log('第二步')
    // maxPDFPages：限制最大页数
    if(pdf.numPages > that.maxPDFPages) {
        that.$message.error('上传文件的页数请限制在'+ that.maxPDFPages +'张')
        return
    }
    // 其他操作
    console.log('第三步')
})

错误（也不能算错，毕竟能跑，要根据实际情况选择）：

console.log('第一步')
pdfjsLib.getDocument(pdfurl).promise.then(pdf => {
    console.log('pdf页数', pdf.numPages)
    console.log('第三步')
    // maxPDFPages：限制最大页数
    if(pdf.numPages > that.maxPDFPages) {
        that.$message.error('上传文件的页数请限制在'+ that.maxPDFPages +'张')
        return
    }
})

// 其他操作
console.log('第二步')

问题描述

1、组件版本：

首先确认自己需要的版本，很重要，我就是没看版本导致前1小时的失败，4+版本编译出来是mjs，而我需要的是js（能力低，水平差，只会js，mjs转js还需要babel编译转换）

2、安装问题：

我这个版本使用类似echarts或是百度地图的那种方式导入：import * as xx from 'xxx'，普通的import xx from 'xxx'是不行的（也可能是我不行，(๑¯ω¯๑)）

3、js内方法类型

一定确保自己引用的方法有适配自己变量的类型，否则会报错

---

部分源码：

// 导入：
import * as pdfjsLib from 'pdfjs-dist/build/pdf'

// 声明组件父子传递的props变量：（记得补充其他代码，这只是参考）

// 是否限制pdf页数
isLimitPDFPages: {
    type: Boolean,
    default: false,
},
// pdf最大页数
maxPDFPages: {
    type: Number,
    default: 20,
}


// methods部分方法：
// 判断pdf页数是否超过20
if(that.isLimitPDFPages && fileType == 'application/pdf') {
    let file = event.target.files[0]
    let pdfurl = URL.createObjectURL(file)
    pdfjsLib.getDocument(pdfurl).promise.then(pdf => {
        console.log('pdf页数', pdf.numPages)
    })
}