Report Studio之界面优化技巧二、处理图片丢失问题

浏览: 1458

在前一篇博文中,我们了解了如何向报表添加图片。这是一个很有用的小技巧,在实际需求中经常会遇到。有时候我们需要在报表中处理成百上千张图片(如产品目录报表),这时我们再用手工的方式输入图片路径,已经非常麻烦,甚至不可能。通常的,我们把图片URL或者名称储存在数据库中。也是因为图片很多,有时候可能会出现图片缺失,或者图片不可访问的情况。这时报表会显示错误图标——这让报表看起来很丑,并且不专业。

Clipboard Image.png

本例将展示如何处理这样的情况,以使报表看起来更美观。

 

准备工作…

 

我们使用上一示例所创建的报表。为了出现图片缺失的情况,我们还需要到服务器的相关目录下重命名green.jpg为green.jpg.backup。

 

如何实施…

 

1. 在上一示例中,我们在报表中添加了图片,并定义了它的conditional URLs。我们现在需要把图片对象替换为HTML对象。

点击工具栏中的Unlock图标解锁报表,然后删除Image列中的图片对象,然后在相同的地方添加一个HTML对象。

Clipboard Image.png

2. 选中HTML项目,然后在其属性栏中,设置器HTML Source Variable为‘Traffic’。

3. 为不同的条件定义HTML代码。对于‘red’条件,定义HTML代码为:

<img src="../samples/images/red.jpg" alt="downsell"  onError="img2txt(this)"/>

4. 对于‘yellow’,定义HTML代码为:

<img src="../samples/images/yellow.jpg" alt="No Change" onError="img2txt(this)"/>

5. 对于‘green’,定义其HTML代码为:

<img src="../samples/images/green.jpg" alt="Upsell" onError="img2txt(this)"/>

6. 转到Page Explorer,向报表中添加一个HTML,位置在列表之前。

Clipboard Image.png

7. 定义此HTML对象代码为:

<script>
function img2txt(img) {
txt = img.alt;
img.parentNode.innerHTML=txt;}
</script>

8.运行并测试报表。

Clipboard Image.png

如我们所见,当图片缺失时,错误图片自动被我们预定义的文本替换。

 

工作原理…

 

这里我们使用自己编写的代码显示图片,而不是使用Report Studio内置的Image组件。

首先我们向报表添加了一个HTML对象,然后通过Traffic变量的三个条件向HTML对象中添加了三段代码。我们通过在代码中使用<img>标签的方式显示图片。<img>标签允许我们定义替换文本和onError事件。我们通过onError事件调用我们编写的img2txt函数。

Img2txt函数使用我们预先在代码中定义的替换文本来替换image列中的HTML代码。因此,如果green.jpg图片丢失,此函数会将HTML代码替换为文本Upsell。

 

更多…

 

因为本例我们使用了在浏览器端运行的HTML和JavaScript代码,所以本例只可以在HTML输出中运行。

推荐 0
本文由 zhengyi1943 创作,采用 知识共享署名-相同方式共享 3.0 中国大陆许可协议 进行许可。
转载、引用前需联系作者,并署名作者且注明文章出处。
本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责。本站是一个个人学习交流的平台,并不用于任何商业目的,如果有任何问题,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

0 个评论

要回复文章请先登录注册