微信公众号:次世代数据技术 关注可了解更多的教程。问题或建议,请公众号留言或联系本人; 如果您有报表开发需求或者定制化功能开发,也可以联系本人; 微信号:weibw162
本教程视频讲解可以关注本人B站进行观看:次世代数据技术 同时,您也可以在抖音及微信视频号平台搜索次世代数据技术进行观看。
一、需求描述
报表上线后,在用户使用过程中,如果需要分享某部分数据,如明细表中的某一行数据,大多数情况下,用户会选择使用截图。但是如果字段比较多,且一屏不能完整显示,则无法一次性截到所有数据,这时候我们可以给用户提供一个一键复制按钮,用户点击后可以复制当前行的所有字段及其值。FineReport目前是不支持该操作的,本文提供一种方案。
本方案的实现步骤如下:
- 通过调用clipboard.writeText()接口,将明细表中的字段传递到剪切板中。
注1:不支持移动端使用。注2:本文涉及到的技术及流程均仅在FineReport 11.0 版本进行实际验证,如果您在使用过程中出现问题可以联系本作者。
二、具体操作
第一步
给明细表行末增加一个复制按钮,然后新增一个超级链接
,类型选择为JavaScript脚本
。
第二步
在超级链接中填入对应JavaScript代码及公式。 JavaScript代码如下:
navigator.clipboard.writeText(cutText).then(
() => { console.log("复制成功!") },
() => { console.log("复制失败!") });
navigator.clipboard.writeText(cutText).then(
() => { console.log("复制成功!") },
() => { console.log("复制失败!") });
2
3
另外,需要增加一个参数,参数名为cutText
,值为公式,如下所示:
CONCATENATE(
'订单ID:', B2,
'\n产品ID:', C2,
'\n单价:', D2,
'\n数量:', E2,
'\n进价:', F2,
'\n折扣:', G2,
)
CONCATENATE(
'订单ID:', B2,
'\n产品ID:', C2,
'\n单价:', D2,
'\n数量:', E2,
'\n进价:', F2,
'\n折扣:', G2,
)
2
3
4
5
6
7
8
注意:该公式的作用是将需要复制的字段组成一个json字符串,大家在实际使用过程中药根据实际场景调整一下单双引号的使用方式。
保存预览,点击复制按钮后找一个输入框粘贴,查看结果:
当然,我们可以适当的加入制表符,这样可以方便用户直接将内容粘贴到Excel中。 仅需要替换一下公式即可:
CONCATENATE(
'订单ID\t', B2,
'\n产品ID\t', C2,
'\n单价\t', D2,
'\n数量\t', E2,
'\n进价\t', F2,
'\n折扣\t', G2,
)
CONCATENATE(
'订单ID\t', B2,
'\n产品ID\t', C2,
'\n单价\t', D2,
'\n数量\t', E2,
'\n进价\t', F2,
'\n折扣\t', G2,
)
2
3
4
5
6
7
8
点击复制后,找到一个Excel粘贴即可:
三、注意事项
1、由于本文使用了clipboard
的相关接口,所以大家在使用时要注意浏览器的兼容性,MDN文档中针对此接口的浏览器兼容性说明如下:
四、模板文件下载
扫码即可下载文档示例模板及其他代码文件 如果您在阅读或实际操作过程中有问题,可以随时添加作者好友进行咨询。