轻松实现：uni-app 开发中如何在微信小程序中下载并处理 base64 编码的 PDF 文件

uni-app使用vue3开发微信小程序下载base64PDF文件。

• 我们在发送请求需要设置相应数据类型：（否则无法正确查看）

responseType: 'arraybuffer', // 响应数据类型

接着，假设我们在调用接口的时候已经得到了base64的PDF数据

• 调用uni.getFileSystemManager获取全局唯一的文件管理器

const FileSystemManager = uni.getFileSystemManager();

• 设置临时目录以及要查看的pdf文件名

const filePath = `${wx.env.USER_DATA_PATH}/这里是要查看的pdf文件名.pdf`;

• 写入pdf到文件系统里

注意这里我们的data是要去除二进制流文件的前缀的

FileSystemManager.writeFile(Object object)

下方代码中的data的值cleanedStr应该是去除前缀后的结果

// res是已经取得的base64数据 let cleanedStr = res.replace('data:image/png;base64,', '');

FileSystemManager.writeFile({
    filePath: filePath,
    data: cleanedStr,
    encoding: 'base64',
    success: function (writeRes) {
    },
    fail: function (err) {
        console.error('Failed to write file:', err);
    },
});

• 调用uni.openDocument方法查看pdf文件

在这里如果你出现了文件类型不正确，或者查看的pdf文件是空白页，请你先查找一下是否设置了responseType。是否是base64类型的文件（如果是二进制流的文件需要更改上一步的encoding为binary。如果是base64文件类型，请确保去除了前缀data:image/png;base64,）

uni.openDocument({
    filePath: filePath,
    fileType: 'pdf',
    showMenu: true,
    success: function (openRes) {
        console.log('Document opened successfully:', openRes);
    },
    fail: function (err) {
        console.error('Failed to open document:', err);
    },
});

• 最终完成代码如下

try {

    // 调用接口获取 PDF 文件base64数据
    // 假设res是你从接口获取到的PDF文件base64数据
    let cleanedStr = res.replace('data:image/png;base64,', '');
  
    const FileSystemManager = uni.getFileSystemManager();
    
    const filePath = `${wx.env.USER_DATA_PATH}/这里是要查看的pdf文件名.pdf`;
  
    // 写入 PDF 文件到文件系统
    FileSystemManager.writeFile({
        filePath: filePath,
        data: cleanedStr,
        encoding: 'base64',
        success: function (writeRes) {
            uni.openDocument({
                filePath: filePath,
                fileType: 'pdf',
                showMenu: true,
                success: function (openRes) {
                    console.log('Document opened successfully:', openRes);
                },
                fail: function (err) {
                    console.error('Failed to open document:', err);
                },
            });
        },
        fail: function (err) {
            console.error('Failed to write file:', err);
        },
    });
  } catch (error) {
    console.error('获取 PDF 文件失败:', error);
  }