uni-app 打开文件(文件或文件流)

最新推荐文章于 2024-07-24 10:51:42 发布

周皮皮皮皮皮皮

最新推荐文章于 2024-07-24 10:51:42 发布

阅读量6k

点赞数

分类专栏：前端 uniapp 文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/qq_32439381/article/details/122977615

版权

前端同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

uniapp

4 篇文章 0 订阅

订阅专栏

本文档介绍了如何使用uniapp和koa搭建一个后台服务，以提供Excel和Word文件下载，并在平板上通过WPS应用程序打开。通过创建koa路由返回二进制文件流，uniapp端调用downloadFile接口下载文件，再使用openDocument打开。需要注意的是，此过程依赖于设备上安装的WPS应用，并可能涉及跨域问题，需要后台配置CORS。

摘要由CSDN通过智能技术生成

需求：uniapp可以在平板上面打开excel文件或word文件，可以用wps打开后打印

1. 创建个koa项目模拟后台返回二进制文件流

const router = require("koa-router")();
const xlsx = require("node-xlsx");

router.get("/excel", async (ctx, next) => {
  const res = [
    ["name", "age"],
    ["wuliu", "111"],
  ];
  const buffer = xlsx.build([{ name: "firstSheet", data: res }]);
  ctx.set(
    "Content-Disposition",
    "attachment;filename=test.xlsx;filename*=UTF-8"
  );
  // 返回给前端
  ctx.body = buffer;
});

module.exports = router;

2. uniapp 下载文件

uni.downloadFile({
	url: BaseConfig.BASE_API + '/excel?id=' + item.id, // 二进制文件流
    // url: BaseConfig.BASE_API + '/excel.xlsx' // 直接下载文件
	header:{ // 鉴权、根据自己项目
		'check-device-type': 'app'
	},
	success: (res1) => {
		const tempFilePath = res1.tempFilePath
		uni.saveFile({
			tempFilePath,
			success:(res2)=>{
				//res.savedFilePath文件的保存路径
				//保存成功并打开文件
				uni.openDocument({
					filePath: res2.savedFilePath,
					success:(res3) =>console.log('成功打开文档'),
					fail: (err) => {
						console.log('失败')
						console.log(err)
					}
				})
			},
			fail:(err)=>{
				console.log('下载失败')
				console.log(err)
			}
		})
	},
	fail: (err) => {
		console.log('err' + err)
	}
})

3. 踩坑