数据库存二进制文件,在前端页面下载时由图标代替文字超链接

因为某些特殊业务需求,可能需要将文件转换成二进制上传到数据库中存储。(虽然极不推荐)

而用户又想在前台页面直接点击就可以下载该文件,目前FR文档中推荐的一种方法是将字段用下载链接展示二进制内容。相关地址如下:https://help.fanruan.com/finereport10.0/doc-view-971.html

实现效果如下:

而在某些业务需求中,我们希望下载链接不是一个文件名超超链接,希望可以是一个图表,点击即可下载文件,或者是"下载"两个文字代替复杂的文件名,但是又不会影响下载的文件的文件名。

老规矩,先上最终效果图

实现思路:

使用jq,将原有的文字超链接替换为图片或者其他统一的文字

实现步骤:
第一步:按照官方文档,实现用下载链接展示二进制内容
具体操作过程参考https://help.fanruan.com/finereport10.0/doc-view-971.html

第二步:在模板web属性->填报页面设置中增加加载结束事件,并写入如下代码:

// 创建替代超链接文本的元素,可以是图片,也可以是文字,这里使用FR提供的x-emb-pdf类,实现了pdf的icon图标
var $newElement = $('<div class="x-emb-pdf" style="width:16px;height:16px"></div>');

// 将文本控件右上角的下载按钮给删除掉
$(".fr-fileupload-download-all").remove();

// 将超链接中的文本内容清空
$(".fr-attach-download").empty();

// 将之前创建好的元素插入到超链接中
$(".fr-attach-download").append($newElement);

虽然实现了该功能,但是还是提醒各位开发者,尽可能的不要将文件直接上传到数据库中。

点击下载DEMO模板

posted @ 2022-09-08 22:34  次世代数据技术  阅读(84)  评论(0编辑  收藏  举报