您现在的位置是:首页 >学无止境 >《前端bug齁逼多,真假开发说》2023/4/17-2023/4/21问题汇总网站首页学无止境
《前端bug齁逼多,真假开发说》2023/4/17-2023/4/21问题汇总
1 uniapp 文件下载
uni.downloadFile({
url: url, //仅为示例,并非真实的资源
success: (res) => {
if (res.statusCode === 200) {
this.dataUrl = res.tempFilePath
uni.openDocument({
filePath: this.dataUrl,
showMenu:true, //关键点
success: function (res) {
console.log('打开文档成功')
}
})
}
}
});
之前的代码 先downloadFile 然后利用 openDocument 去打开文件 如果有下载需求 思路有2个
1 可以使用webview 去写h5 大概率能实现
2 上述代码的openDocument 有个参数 叫 showMenu 默认是false 因为只有微信小程序有,我们添加这个参数后,当打开文档的时候,文档右上角多了三个点,拓展功能里 有保存到本地 已经发送给其他人,可以完成我们所需要的下载功能
2 nestjs 服务端下载文件
最后页面按钮 功能是excel导出 3种方式
1 前端导出 node-xlsx 具体查看这个包就可以了
2 后端导出方式1 前后配合 axios 发送请求 相应中 返回 服务端静态文件的地址。然后前端window.open 二次打开 这个url 进行下载
3 后端导出方式2 前端直接widnow.open 发送请求 后端完成导出 单位java后台说不知道怎么弄,我这用node 的nestjs 模拟后台写了一下
@Get('export')
@AllowAnon()
async downLoad(@Res() res: Response) {
const {name,url} = await this.ossService.download()
const data = fs.readFileSync(url)
res.writeHead(200,{
'Content-Type': 'application/octet-stream', //告诉浏览器这是一个二进制文件
'Content-Disposition': 'attachment; filename=' + encodeURIComponent(name), //告诉浏览器这是一个需要下载的文件
});
res.end(data)
return true;
}
上面那个 @AllowAnon 是自定义注解 表示 这个请求不校验token
然后利用res 设置 响应头 和 响应的 默认文件名 具体 那2个参数的含义 可以去自己了解一下
HTTP知多少——Content-disposition(文件下载) - 简书
4. Content-Disposition 详解__kaifei的博客-CSDN博客
这里额外补充一下 最后面的 return true 是保证请求正常结束,正常有返回,否则服务端抱错
Cannot set headers after they are sent to the client
3.npm run all 的使用
有时候 我们有多个项目在一起。想要一起运行 比如我们写 一个 前后台都是node的项目,或者我们写乾坤的时候 有主项目和多个子项目在一起,我们正常的操作就是分别进到各个项目里 然后npm run start 去运行。 这里介绍一个包 npm-run-all
"scripts": {
"start": "npm-run-all --parallel start:*",
"start:client": "cd client && npm run start:dev",
"start:servers": "cd servers && npm run start:dev",
"test": "echo "Error: no test specified" && exit 1",
"pack": "npm install && npm-run-all --parallel pack:*",
"pack:client": "cd client && npm install",
"pack:servers": "cd servers && npm install"
},
上面的start3个指令 当我们 输入npm run start的时候 他会 默认运行 scripts 里 所有start的开头的指令 也就是 同时帮我运行了 start:client 和start:servers
拓展: 当我有个新项目 clone下来的时候 npm-run-all 包是没有的 所以我们拓展一个npm run pack 指令 先去下载主包 然后 再去下载子项目 这样最后就是 一个npm run pack指令 同步把所有项目的 package都install了