我想点击底部并下载excel文件,但我不知道为什么它不工作.
主要问题在tRPC路由器侧。
我使用的工具:
tRPC路由器:
.mutation("xlsx", {
input: z.object({
id: z.string(),
}),
resolve: async ({ ctx }) => {
const FILE_PATH = "./src/utils/01.xlsx";
const wb = new ExcelJs.Workbook();
await wb.xlsx.readFile(FILE_PATH).then(() => {
var ws = wb.getWorksheet(1);
ws.getCell("H4").value = "fkfk";
});
return wb.xlsx.write(ctx.res);
},
});
前端:
function Print() {
const xlsxMutation = trpc.useMutation(['guest.xlsx'])
const onDownload = React.useCallback(()=>{
xlsxMutation.mutate({
id:"test"
})
},[xlsxMutation])
return (
<>
<button onClick={()=>handleClickOpen()}>download</button>
</>
);
}
CodeSandBox
codesandbox还没有安装ExcelJS,因为我不知道为什么会出现错误。
反正它模拟了我的代码结构。
是否有人使用NextJS tRPC和ExcelJS共享代码。
##编辑
由于xlsx文件已经存在(FILE_PATH),我应该像ctx.res.pipe()
的权利?但如何??
2条答案
按热度按时间3npbholx1#
不确定这种方法对不对,看了关于Blob的文档,然后了解了服务器端和客户端的变形金刚数据像图片或者pdf文件等等,所以我选择了这种方法。
tRPC:
前端:
基本上,路由器端发回转换为base64的excel文件,fontend得到base64数据转换回xlsx文件。
参考:
3qpi33ja2#
与@Balius的方法类似,我的方法利用了enabled + saveAs npm库的useQuery属性:
然后在tRPC路由器中创建文件并返回缓冲区,在本例中我使用docx-templates包在docx缓冲区中创建报告(只是字符串)
我推荐“XLSX”的npm包导出文件,它有更多的选项,它的工作。而exceljs没有为我工作,即使我按照指南的T.