使用vue3-pdf加载PDF时出现Invalid PDF structure错误仅单个文件可正常加载

• 核心原因：请求PDF二进制文件时未指定响应类型，Axios默认将响应体按UTF-8字符串解析，直接破坏了PDF的二进制结构，仅少数编码巧合的文件可以正常解析，所以只有1个文件能加载成功。
• 次要逻辑问题：代码中创建了pdf.createLoadingTask处理后的PDF加载对象，但最终没有传递给组件的src属性，反而传入了普通Blob地址，同时重复创建了两次内容完全一致的Blob对象，存在逻辑冗余。
• 控制台的Warning: Indexing all PDF objects.是pdfjs加载结构不规范PDF时的常规提示，并非报错根源，PDF结构修复后该警告大多会自动消失。

步骤1：修改请求配置，指定二进制响应类型 #

修改getRequest方法，添加responseType: 'blob'配置，禁止Axios自动解析响应为字符串：

const getRequest = (requestString: string) =>
viewAPI
  .get(requestString, {
    responseType: 'blob' // 关键配置，强制返回原始二进制流
  })
  .then((result) => ({ ok: true, result: result.data }))
  .catch((error) => Promise.resolve({ ok: false, error: error }))

步骤2：修正PDF加载逻辑，避免冗余操作 #

调整getFile方法，直接使用返回的Blob生成加载任务，不要重复转Blob，同时正确赋值组件需要的src属性：

// 新增响应式变量存储pdf加载任务
const pdfSrc = ref<any>(null)

const getFile = async () => {
    console.log(currentDocNum);
    console.log(kpiShow.value);
    const responseFile = await rest.getFile(docsList[currentDocNum]);
    // 直接用返回的Blob创建加载任务
    const pdfSource = pdf.createLoadingTask(responseFile.result);
    // 保存下载用的Blob地址
    objectUrl.value = window.URL.createObjectURL(responseFile.result);
    // 给组件绑定的src变量赋值
    pdfSrc.value = pdfSource;
    
    pdfSource.promise.then((pdfTemp: any) => {
      numberPages.value = pdfTemp.numPages;
    });
    if (currentDocNum < docsNumber) currentDocNum++;
  };

步骤3：修改模板绑定 #

将pdf组件的src绑定为处理后的加载任务：

<div class="row" v-if="!kpiShow" >
  <pdf :src="pdfSrc" :page="1" ></pdf>
</div>

步骤4：可选优化 #

页面卸载时调用URL.revokeObjectURL(objectUrl.value)释放内存，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Paweł Nowiński