用uniapp开发微信小程序：文件下载+预览神器，代码给你，解释随便看！

📱 用uniapp开发微信小程序：文件下载+预览神器，代码给你，解释随便看！✨

Hey，小伙伴们！今天给你们带来一个超实用的小功能——在微信小程序里用uniapp实现文件下载和预览！代码已经帮你写好了，直接拿去用！先放上完整代码，别眨眼，后面还有逗你玩的解释哦～

---

❤️ 友情提示：如果觉得这篇教程对你有帮助，别忘了点个赞👍，收藏收藏📂，关注一下🔔，我们一起变强！

---

📝 完整代码放这儿（拿去不谢）

// utils/file-helper.ts
import { config } from "../../config";

/**
 * 📥 下载并预览文件（不缓存版）
 * @param url 文件URL或路径（如果是相对路径，会自动添加baseUrl前缀）
 * @param fileName 文件名（预览界面显示用，不是保存用）
 * @param options 下载选项，可带请求参数、头信息、代理等
 */
export const downloadAndPreviewFile = async (
  url: string,
  fileName: string = "文档",
  options: { data?: any; header?: object; proxy?: boolean } = {},
): Promise<void> => {
  try {
    uni.showLoading({ title: "下载中..." });

    const downloadResult = await downloadFile(url, options);
    const tempPath = downloadResult.tempFilePath;

    await previewFile(tempPath);
  } catch (error) {
    console.error("下载或预览失败:", error);
    uni.showToast({ title: "下载失败", icon: "none" });
    throw error;
  } finally {
    uni.hideLoading();
  }
};

/**
 * 👀 预览文件
 * @param filePath 文件路径
 */
export const previewFile = (filePath: string): Promise<void> => {
  return new Promise<void>((resolve, reject) => {
    uni.openDocument({
      filePath,
      showMenu: true,
      success: () => {
        console.log("文件预览成功");
        resolve();
      },
      fail: (err) => {
        console.error("文件预览失败:", err);
        uni.showToast({ title: "预览失败", icon: "none" });
        reject(err);
      },
    });
  });
};

/**
 * 🌐 下载文件（支持自动拼接地址、带token）
 * @param url 文件URL或相对路径
 * @param options 下载配置，支持请求数据、头信息、代理开关、命名空间等
 */
const downloadFile = (
  url: string,
  options: { data?: any; header?: object; proxy?: boolean; namespace?: string } = {},
): Promise<UniNamespace.DownloadSuccessData> => {
  let fullUrl = url;

  if (url && url.indexOf("http") < 0) {
    if (options.namespace) {
      fullUrl = options.namespace + fullUrl;
    }

    if (options.proxy !== false) {
      fullUrl = config.baseUrl + fullUrl;
    }
  }

  const token = uni.getStorageSync("token") || "";

  const defaultHeader = {
    "Content-Type": "application/json",
    Accept: "*/*",
    ...(token ? { Authorization: `Bearer ${token}` } : {}),
  };

  return new Promise<UniNamespace.DownloadSuccessData>((resolve, reject) => {
    uni.downloadFile({
      url: fullUrl,
      data: options.data,
      header: { ...defaultHeader, ...options.header },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res);
        } else {
          reject(new Error(`下载失败，状态码: ${res.statusCode}`));
        }
      },
      fail: reject,
    });
  });
};

调用时长这样，超简单：

await downloadAndPreviewFile('/performance/export', fileName, {
  data: params,
});

---

🧐 搞懂了吗？听我唠叨两句

1. 先别急着复制，我来给你唠嗑唠嗑
   这代码就像魔法，给你文件的链接（可以是完整 URL，也可以是“/performance/export”这种相对路径），它帮你下载，再帮你打开预览。懒得管缓存啥的，临时文件用完就扔。

2. ✨ 自动加基地址，超贴心
   你传个 /xxx 路径，它自动帮你加上 config.baseUrl，不用你每次写完整地址，代码更整洁。

3. 🔐 Token啥的，帮你自动带好
   你登录后，token存在本地缓存，这下载请求自动帮你加到请求头里，接口安全不操心。

4. ⏳ 下载中，页面有提示，别慌
   下载期间有个loading，告诉用户：“等会儿，文件马上来”，体验up！

5. 👓 预览那步儿，调用了uni.openDocument
   这API能打开微信小程序支持的文件格式，比如 PDF、Word、Excel啥的，用户点点点，文件就打开了。

6. ⚠️ 如果下载失败或者预览失败，不藏着掖着，给你吐个toast
   失败了别怕，用户知道，控制台还会报错，方便调试。

---

🚀 小结

• 要用它，只要一句话：

  await downloadAndPreviewFile('/你的接口地址', '展示的文件名', { data: 请求参数 });
  

• 放心大胆用，微信小程序 uniapp 绝配！

---

看完这篇，文件下载预览你就妥妥的了！