Skip to content

background, border-style color not included when print #4

@dikitaurensia

Description

@dikitaurensia

react-print-tool

hi Bchir, I have an issue, background-color, border-style not included when I print. I used print component, this my component :

const Preview = ({svgRender}) => {
    let sizePaper = svgRender.sizePaper

    if(sizePaper===undefined){
        sizePaper={}
    }

    Object.size = function(obj) {
        var size = 0, key;
        for (key in obj) {
            if (obj.hasOwnProperty(key)) size++;
        }
        return size;
    };

    var size = Object.size(svgRender.objectsByHash);
    let objectsByHash = size>0?Object.values(svgRender.objectsByHash):[]      
    var count = [...Array(sizePaper.detailCount?sizePaper.detailCount:0).keys()]

    let background ={}    
    svgRender.usedBackground===true?background={backgroundImage: `url(${sampleInvoice})`, backgroundSize:"100% 100%"}:background={}
        
    return (        
         <div style={{position: "relative", backgroundColor:"white", height:sizePaper.height+"mm", width:sizePaper.width+"mm", ...background  }}>         
            {
                objectsByHash.map((item) => { 
                    let text = contentSystem(item.text)
                    return (item.table.name!=="TextOnly" && item.table.fieldname==="") || item.table.name==="TextOnly" ?
                        <div style={{position:"absolute", backgroundColor:item.fill, width:item.width+"px",height:item.height+"px", left:(item.x+sizePaper.LeftMargin)+"px", top:(item.y+sizePaper.TopMargin)+"px", textAlign: item.textProps.textAlign, borderStyle:item.frame.top+" "+item.frame.right+" "+item.frame.bottom+" "+item.frame.left, borderWidth:"thin"}}>{item.text==="logo"?<img src={logo} width={item.width+"px"} height={item.height+"px"} alt="logo"/> :text}</div>
                    :
                        <div>
                            <div style={{position:"absolute", backgroundColor:item.fill, width:item.width+"px",height:item.height+"px", left:(item.x+sizePaper.LeftMargin)+"px", top:(item.y+sizePaper.TopMargin)+"px", textAlign: item.textProps.textAlign, borderStyle:item.frame.top+" "+item.frame.right+" "+item.frame.bottom+" "+item.frame.left, borderWidth:"thin"}}>
                                {text==="logo"?<img src={logo} width={item.width+"px"} height={item.height+"px"} alt="logo"/> :text}
                            </div> 
                            
                            {                               
                                count.map((index) =>{
                                    return <div style={{position:"absolute",backgroundColor:item.filldetail , width:item.width+"px",height:item.height+"px", left:(item.x+sizePaper.LeftMargin)+"px", top:(item.y+sizePaper.TopMargin)+(item.height*(index+1))+"px", textAlign: item.textPropsdetail.textAlign , borderStyle:item.framedetail.top+" "+item.framedetail.right+" "+item.framedetail.bottom+" "+item.framedetail.left, borderWidth:"thin"}}>
                                                {"Sample Text ("+item.table.fieldname+")"}
                                            </div> 
                                })                                   
                            }
                        </div>                       
                })
            }
        </div>
    )
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions