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

需求: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. 踩坑

  • 手机或平板上面必须有wps才可以成功打开
  • 打开文件可能存在跨域,这个需要后台去进行配置cors
  • 二进制文件流和文件都可以用上面那套代码

你可能感兴趣的:(前端,uniapp,vue.js,前端,elementui)