技术博客

 二维码生成PDF预览和下载功能完整解决方案

在开发二维码生成功能时，PDF文件的在线预览和下载是常见的需求。本文将分享在实际项目中遇到的问题及完整的解决方案。

 一、技术栈

- 后端：Python Flask

- 前端：HTML5 + JavaScript + Bootstrap 5

- PDF渲染：PDF.js 3.x

- 数据库：MySQL

 二、核心问题与解决方案

 问题一：PDF在线预览一直加载

 问题现象

上传PDF文件后，在线预览区域显示加载动画，但无法显示PDF内容。

 问题原因

1. PDF.js库版本不兼容（4.x版本存在稳定性问题）

2. JavaScript代码在DOM加载完成前执行

3. 缺少PDF.js库加载状态检查

4. 未配置字符映射（cMap），导致中文字符显示异常

 解决方案

1. 使用稳定的PDF.js版本

推荐使用3.11.174版本，稳定性更好。

```html

2. 等待DOM加载完成

确保页面完全加载后再执行JavaScript代码。

```javascript

document.addEventListener('DOMContentLoaded', function() {

    console.log('页面加载完成');

    // PDF.js初始化代码

});

```

3. 检查PDF.js库加载状态

添加PDF.js库加载检查，避免未定义错误。

```javascript

let pdfjsLib = null;

if (typeof window.pdfjsLib !== 'undefined') {

    pdfjsLib = window.pdfjsLib;

} else if (typeof window.pdfjs !== 'undefined') {

    pdfjsLib = window.pdfjs;

} else if (typeof window.PDFJS !== 'undefined') {

    pdfjsLib = window.PDFJS;

} else {

    console.error('PDF.js未加载');

    return;

}

```

4. 配置Worker和字符映射

确保PDF.js能够正确处理中文字符。

```javascript

// 设置Worker

if (typeof pdfjsLib.GlobalWorkerOptions !== 'undefined') {

    pdfjsLib.GlobalWorkerOptions.workerSrc =

        'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

}

// 加载PDF文档（带字符映射配置）

const loadingTask = pdfjsLib.getDocument({

    url: pdfUrl,

    cMapUrl: 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/cmaps/',

    cMapPacked: true

});

 问题二：下载文件未保持原文件名

 问题现象

下载PDF文件时，文件名变为系统生成的UUID文件名，而非用户上传时的原始文件名。

 问题原因

1. 服务器对所有PDF请求都返回相同的响应

2. 未区分预览和下载请求

3. 未从数据库中提取原始文件名

 解决方案

1. 后端区分预览和下载请求

在文件服务路由中区分预览和下载请求。

```python

@app.route('/file/