如何实现pdf的局部预览

工作中遇到一个需求，上传pdf文件后需要在当前页面进行预览。那么这个需求该如何实现呢？

具体如下：

本demo需要用到的苍穹控件有：图片展示控件、IFrame控件以及其他例如按钮控件。

原理是利用图片控件或者按钮的上传配置，通过代码获取上传的文件的预览路径，然后基于IFrame或者Html控件展示在前端界面上。

import kd.bos.form.control.Button;
import kd.bos.form.control.IFrame;
import kd.bos.form.control.Image;
import kd.bos.form.control.events.ClickListener;
import kd.bos.form.control.events.UploadEvent;
import kd.bos.form.control.events.UploadListener;
import kd.bos.form.plugin.AbstractFormPlugin;
import kd.bos.url.UrlService;

import java.util.ArrayList;
import java.util.EventObject;
import java.util.List;


public class DemoPlugin extends AbstractFormPlugin implements UploadListener, ClickListener {


    @Override
    public void registerListener(EventObject e) {
        super.registerListener(e);

		//注册图片展示控件的上传和点击事件
        Image testimageap = this.getControl("testimageap");
        testimageap.addUploadListener(this);
        testimageap.addClickListener(this);
		//注册按钮的点击和上传事件
        Button buttonap = (Button) this.getControl("buttonap");
        buttonap.addClickListener(this);
        buttonap.addUploadListener(this);
    }

    @Override
    public void afterCreateNewData(EventObject e) {
        //隐藏pdf预览的iframe
        this.getView().setVisible(Boolean.FALSE, "iframeap");
    }

    @Override
    public void upload(UploadEvent evt) {
        Object[] urls = evt.getUrls();
        if (urls.length > 0) {
	//此处的附件地址即为预览地址，但需要注意不论是文件展示控件还是按钮上传控件，
	//均需要关闭临时存储。不关闭就只能获取到下载的地址而不是预览地址。
            String attachmentPreviewUrl = UrlService.getAttachmentPreviewUrl(urls[0].toString());
            String imageFullUrl = UrlService.getImageFullUrl(urls[0].toString());

            List<String> jpgs = new ArrayList<>(3);
            jpgs.add("jpg");
            jpgs.add("jpeg");
            jpgs.add("png");
            String tempUrl = urls[0].toString();
            String suffixStr = tempUrl.substring(tempUrl.lastIndexOf(".") + 1);
            String fileName = tempUrl.substring(tempUrl.lastIndexOf("/") + 1);

            if (tempUrl.endsWith(".pdf")) {
				//获取到地址后展示到iframe控件上
                IFrame iframeap = (IFrame) this.getControl("iframeap");
                iframeap.setSrc(attachmentPreviewUrl);

				//展示iframe，隐藏图片展示控件
                this.getView().setVisible(Boolean.FALSE, "testimageap");
                this.getView().setVisible(Boolean.TRUE, "iframeap");
            } else if (jpgs.contains(suffixStr)) {
				//设置图片控件的地址
                Image testimageap = this.getControl("testimageap");
                testimageap.setUrl(imageFullUrl);
				//展示图片，隐藏pdf控件
                this.getView().setVisible(Boolean.TRUE, "testimageap");
                this.getView().setVisible(Boolean.FALSE, "iframeap");
            }
        }
    }

}

注意：图片展示控件或者按钮上传控件需要注意上传的文件不能保存到缓存，需要去掉保存到缓存那个选项。若保存到缓存，获取的地址预览应该会变下载。

效果图附件图片所示。

元数据设计界面：

上传前界面：

上传后预览界面：

注意点：此处的临时存储不能勾，否则可能导致

UrlService.getAttachmentPreviewUrl(String path)

方法获取的地址不是预览地址，而变成下载地址。