Printing with vaadin ?

Hello

I’m trying print a layout using JavaScript.getCurrent().execute(“print();”);
Doesn’t work and print preview is blank


/** display informations */
public class ViewCurriculum extends CustomComponent implements Button.ClickListener{    
    private static final long serialVersionUID = 1L;
    private final SimpleDateFormat sdf = new SimpleDateFormat("dd/MM/yyyy");
    private Long id; //id curriculum
    private CustomLayout mainLayout;
    private Button btnImprimir, btnSair;
    private Image foto;
    private String cpf = "000.000.000-00";
    
    public ViewCurriculum(Long id){
        this.id = id;        
        buildLayout();
        setCompositionRoot(mainLayout);
    }
    
    private CustomLayout buildLayout(){
        mainLayout = new CustomLayout(exibeInformacoes().toString());
        
        //foto
        VerticalLayout vLayoutFoto = new VerticalLayout();
        ImagemUsuario imgU = new ImagemUsuario(cpf);
        foto = imgU.getImageUsuario();
        foto.setWidth("200px");
        foto.setHeight("200px");
        vLayoutFoto.addComponent(foto);
        mainLayout.addComponent(vLayoutFoto, "fotoCandidato");
        
        //btns/**
        HorizontalLayout hLayoutButtons = new HorizontalLayout();
        hLayoutButtons.setMargin(true);
        btnImprimir = new Button();
        btnImprimir.setStyleName(Reindeer.BUTTON_LINK);        
        btnImprimir.setIcon(new ThemeResource("../icons/printer.png"));
        btnImprimir.setDescription("Imprimir");
        btnImprimir.addClickListener(this);
        hLayoutButtons.addComponent(btnImprimir);
                
        btnSair = new Button();
        btnSair.setStyleName(Reindeer.BUTTON_LINK);        
        btnSair.setIcon(new ThemeResource("../icons/cancel.png"));
        btnSair.setDescription("Sair");
        btnSair.setClickShortcut(KeyCode.ESC);
        btnSair.addClickListener(this);
        hLayoutButtons.addComponent(btnSair);
                
        mainLayout.addComponent(hLayoutButtons, "hLayoutButtons");
        
        return mainLayout;
    }

    
    /** exibe as informacoes em html */
    private StringBuilder exibeInformacoes(){
        StringBuilder html = new StringBuilder();
        html.append("<html>");
        html.append("<body>");
        html.append("<style text/css>");
        html.append("caption{"
                            + "font-size:small;"
                            + "font-weight:bold;"
                            + "padding:2px;"
                            + "text-align:left;"
                            + "}"
                    + "table{"
                            + "margin:5px;"                            
                            + "padding:5px;"
                            + "border-collapse:collapse;"
                            + "border-spacing:10px;"
                            + "width:600px;"
                            + "}"                
                    + "th{"
                            + "font-size:x-small;"
                            + "font-weight:bold;"
                            + "padding:3px;"
                            + "margin:3px;"                                
                            + "border:1px #ccc solid;"
                            + "background:#FAEBD7;"                                
                            + "}"
                    + "thread{"
                            + "background: #fc9;"
                            + "}"
                    + "td{"
                            + "font-size:x-small;"
                            + "padding:3px;"
                            + "margin:3px;"
                            + "border:1px #cc solid;"                            
                            + "}");
        html.append("</style>");
        
        
        //informacoes do curriculum
        List<Curriculum2> listaC2 = new Curriculum2DAO().getInformacoesCurriculum(id);
        if(!listaC2.isEmpty()){
            for(Curriculum2 c2 : listaC2){
                this.cpf = c2.getCurriculum().getCpf(); //informa o cpf
                
                
                html.append("<table>");
                html.append("<caption>Informações gerais</caption>");
                //cabecalho
                html.append("<tr>");
                html.append("<td location='fotoCandidato'/></td>");
                html.append("</tr>");
                html.append("<tr>");
                html.append("<td style='font-size:small;color:blue;font-weight:bold;'>" + c2.getCurriculum().getEmail() + "</td>");
                html.append("</tr>");
                
                //cargo pretendido
                html.append("<tr>");
                html.append("<th>" + "Cargo pretendido" + "</th>");
                html.append("</tr>");
                html.append("<tr>");
                html.append("<td>" + c2.getCurriculum().getCargo().getCargo() + "</td>");
                html.append("</tr>");
                
                //primeiro bloco
                html.append("<tr>");
                html.append("<th>" + "Nome" + "</th>");
                html.append("<th>" + "Sexo" + "</th>");
                html.append("<th>" + "Nascimento" + "</th>");
                html.append("</tr>");
                html.append("<tr>");
                html.append("<td>" + c2.getCurriculum().getNome() + "</td>");
                html.append("<td>" + c2.getCurriculum().getSexo() + "</td>");
                html.append("<td>" + sdf.format(c2.getDataNasceu()) + "</td>");
                html.append("</tr>");
                
                //segundo bloco                
                html.append("<th>" + "Cidade" + "</th>");
                html.append("<th>" + "Endereço" + "</th>");        
                html.append("<th>" + "Número" + "</th>");
                html.append("</tr>");
                
                html.append("<tr>");
                html.append("<td>" + c2.getCidade() + "</td>");
                html.append("<td>" + c2.getEndereco() + "</td>");                
                html.append("<td>" + c2.getNumero() + "</td>");                
                html.append("</tr>");
                
                //terceiro bloco
                html.append("<tr>");
                html.append("<th>" + "Bairro" + "</th>");
                html.append("<th>" + "Complemento" + "</th>");
                html.append("<th>" + "Estado" + "</th>");                
                html.append("</tr>");                
                html.append("<tr>");
                html.append("<td>" + c2.getBairro() + "</td>");
                html.append("<td>" + c2.getComplemento() + "</td>");
                html.append("<td>" + c2.getEstado() + "</td>");
                html.append("</tr>");
                
                //quarto bloco
                html.append("<tr>");
                html.append("<th>" + "Cep" + "</th>");
                html.append("<th>" + "Nacionalidade" + "</th>");
                html.append("<th>" + "Naturalidade" + "</th>");
                html.append("</tr>");
                html.append("<tr>");                
                html.append("<td>" + c2.getCep() + "</td>");                
                html.append("<td>" + c2.getNacionalidade() + "</td>");
                html.append("<td>" + c2.getNaturalidade() + "</td>");
                html.append("</tr>");
                
                //quinto bloco
                html.append("<tr>");                
                html.append("<th>" + "Telefone" + "</th>");
                html.append("<th>" + "Celular" + "</th>");
                html.append("<th>" + "Estado civil" + "</th>");                
                html.append("</tr>");                                
                html.append("<tr>");                
                html.append("<td>" + c2.getFone() + "</td>");
                html.append("<td>" + c2.getCelular() + "</td>");
                html.append("<td>" + c2.getEstcivil() + "</td>");
                html.append("</tr>");
                
                //sexto bloco
                html.append("<tr>");
                html.append("<th>" + "RG" + "</th>");
                html.append("<th>" + "Pai" + "</th>");
                html.append("<th>" + "Mãe" + "</th>");                
                html.append("</tr>");
                html.append("<tr>");                
                html.append("<td>" + c2.getRg() + "</td>");
                html.append("<td>" + c2.getPai() + "</td>");
                html.append("<td>" + c2.getMae() + "</td>");                
                html.append("</tr>");
                                
                //setimo bloco
                html.append("<tr>");                
                html.append("<th>" + "Cart.Profissional" + "</th>");
                html.append("<th>" + "Série" + "</th>");
                html.append("<th>" + "Reservista" + "</th>");
                html.append("</tr>");                                
                html.append("<tr>");                
                html.append("<td>" + c2.getCartprof() + "</td>");
                html.append("<td>" + c2.getSerie() + "</td>");
                html.append("<td>" + c2.getReservista() + "</td>");
                html.append("</tr>");
                
                //oitavo bloco                
                html.append("<tr>");
                html.append("<th>" + "Título eleitor" + "</th>");
                html.append("<th>" + "Zona" + "</th>");
                html.append("<th>" + "Carteira habilitação" + "</th>");                
                html.append("</tr>");
                                
                html.append("<tr>");
                html.append("<td>" + c2.getTiteleitor() + "</td>");
                html.append("<td>" + c2.getZona() + "</td>");
                html.append("<td>" + c2.getCarthabilita() + "</td>");                
                html.append("</tr>");
                
                //nono bloco
                html.append("<tr>");
                html.append("<th>" + "Categoria" + "</th>");
                html.append("<th>" + "Último salário" + "</th>");
                html.append("<th>" + "Salário pretendido" + "</th>");
                html.append("</tr>");
                html.append("<tr>");
                html.append("<td>" + c2.getCategoria() + "</td>");
                html.append("<td>" + new DecimalFormat("###,###,##0.00").format(c2.getUltimosalario()) + "</td>");
                html.append("<td>" + c2.getSalariopretendido() + "</td>");
                html.append("</tr>");
                
                //decimo bloco                
                html.append("<tr>");                
                html.append("<th>" + "Observações" + "</th>");
                html.append("</tr>");
                html.append("<tr>");                
                html.append("<td>" + c2.getObservacoes() + "</td>");
                html.append("</tr>");
                                
                html.append("</table>");                
            }
            
            
            //escolaridade
            List<Escolaridade> listaEscolaridade = new EscolaridadeDAO().getInformacoesEscolaridade(id);
            html.append("<table>");
            html.append("<caption>Escolaridade</caption>");
            if(!listaEscolaridade.isEmpty()){
                for(Escolaridade esc : listaEscolaridade){
                    //primeiro bloco
                    html.append("<tr>");
                    html.append("<th>" + "Instituição" + "</th>");
                    html.append("<th>" + "Cidade" + "</th>");
                    html.append("<th>" + "Estado" + "</th>");
                    html.append("</tr>");
                    html.append("<tr>");
                    html.append("<td>" + esc.getEscola() + "</td>");
                    html.append("<td>" + esc.getCidade() + "</td>");
                    html.append("<td>" + esc.getEstado() + "</td>");
                    html.append("</tr>");
                    
                    //segundo bloco
                    //primeiro bloco
                    html.append("<tr>");
                    html.append("<th>" + "Início" + "</th>");
                    html.append("<th>" + "Conclusão" + "</th>");
                    html.append("<th>" + "Ensino" + "</th>");
                    html.append("</tr>");
                    html.append("<tr>");
                    html.append("<td>" + sdf.format(esc.getInicio()) + "</td>");                    
                    html.append("<td>" + (esc.getConclusao() == null ? "Não informado" : sdf.format(esc.getConclusao())) + "</td>");
                    html.append("<td>" + esc.getEnsino() + "</td>");
                    html.append("</tr>");
                    
                }
                html.append("</table>");
            }
                
            //cursos(aperfeicoamentos)
            List<Aperfeicoamento> listaAperfeicoamento= new AperfeicoamentoDAO().getInformacoesAperfeicoamento(id);            
            html.append("<table>");
            html.append("<caption>Cursos e Aperfeiçoamentos</caption>");
            for(Aperfeicoamento apf : listaAperfeicoamento){            
                    //primeiro bloco
                    html.append("<tr>");
                    html.append("<th>" + "Curso/Aperfeiçoamento" + "</th>");
                    html.append("<th>" + "Instituição" + "</th>");
                    html.append("<th>" + "Cidade" + "</th>");                    
                    html.append("</tr>");
                    html.append("<tr>");
                    html.append("<td>" + apf.getAperfeicoamento() + "</td>");
                    html.append("<td>" + apf.getEntidadeensino() + "</td>");
                    html.append("<td>" + apf.getCidade()+ "</td>");                    
                    html.append("</tr>");
                    
                    //segundo bloco
                    html.append("<tr>");
                    html.append("<th>" + "Estado" + "</th>");
                    html.append("<th>" + "Início" + "</th>");
                    html.append("<th>" + "Conclusão" + "</th>");
                    html.append("</tr>");
                    html.append("<tr>");
                    html.append("<td>" + apf.getEstado()+ "</td>");
                    html.append("<td>" + sdf.format(apf.getInicio())+ "</td>");
                    html.append("<td>" + (apf.getConclusao() == null ? "Não informado" : sdf.format(apf.getConclusao())) + "</td>");
                    html.append("</tr>");
                    
            }
            html.append("</table>");
            
            
            
            //experiencias
            List<Experiencia> listaExperiencia = new ExperienciaDAO().getInformacoesExp(id);
            html.append("<table>");
            html.append("<caption>Experiências</caption>");
            for(Experiencia exp : listaExperiencia){            
                    //primeiro bloco
                    html.append("<tr>");
                    html.append("<th>" + "Empresa" + "</th>");
                    html.append("<th>" + "Endereço" + "</th>");
                    html.append("<th>" + "Cidade" + "</th>");                    
                    html.append("</tr>");
                    html.append("<tr>");
                    html.append("<td>" + exp.getEmpresa() + "</td>");
                    html.append("<td>" + exp.getEndereco() + "</td>");
                    html.append("<td>" + exp.getCidade() + "</td>");                    
                    html.append("</tr>");
                    
                    //segundo bloco
                    html.append("<tr>");                    
                    html.append("<th>" + "Bairro" + "</th>");
                    html.append("<th>" + "Estado" + "</th>");
                    html.append("<th>" + "Telefone" + "</th>");
                    html.append("</tr>");
                    html.append("<tr>");                    
                    html.append("<td>" + exp.getBairro()+ "</td>");
                    html.append("<td>" + exp.getEstado()+ "</td>");
                    html.append("<td>" + exp.getFone()+ "</td>");
                    html.append("</tr>");
                    
                    //terceiro bloco
                    html.append("<tr>");                    
                    html.append("<th>" + "Cargo" + "</th>");
                    html.append("<th>" + "Entrada" + "</th>");
                    html.append("<th>" + "Saída" + "</th>");
                    html.append("</tr>");
                    html.append("<tr>");                    
                    html.append("<td>" + exp.getCargo()+ "</td>");
                    html.append("<td>" + sdf.format(exp.getEntrada()) + "</td>");
                    html.append("<td>" + (exp.getSaida() == null ? "Não informado" : sdf.format(exp.getSaida()))+ "</td>");
                    html.append("</tr>");
                    
                    //quarto bloco
                    html.append("<tr>");                    
                    html.append("<th>" + "Funções desempenhadas" + "</th>");
                    html.append("<th>" + "Encarregado" + "</th>");                    
                    html.append("</tr>");
                    html.append("<tr>");                    
                    html.append("<td>" + exp.getFuncoesDesemp()+ "</td>");
                    html.append("<td>" + exp.getNomeEncarregado()+ "</td>");                    
                    html.append("</tr>");
                    
            }
            html.append("</table>");            
        }else{
            html.append("<h1> Nenhuma informação encontrada para este curriculum </h1>");
            btnImprimir.setVisible(false);
        }
        
        html.append("<div location='hLayoutButtons' style='padding:0px;margin:0px;'/>");
        html.append("</body>");
        html.append("</html>");
        
        return html;
    }

    @Override
    public void buttonClick(ClickEvent event) {
        if(event.getButton() == btnSair){
            Window w = (Window)getParent();
            w.close();
        }
        
        /** print this page */
        if(event.getButton() == btnImprimir){
            JavaScript.getCurrent().execute("print();");
        }
    }
}

Any idea ?

Hello fernando,

I never tried to print self written HTML in vaadin but may I ask you why you don’t use vaadin table? No offense but writing html code that way in Java is terrible code :wink:

You said use a vaadin table ? component table ?

Hi fernando,

yes I mean the com.vaadin.ui.Table class