react html2canvas 遇到的坑

html2canvas  https://html2canvas.hertzen.com

1. svg 图片导出后样式不全

    这是由于html2canvas  读取dom树时不会读取svg标签外面的样式。

    1）简单粗暴的修改方法就是编辑svg将样式直接编辑在svg图片之内。

    2）使用html2canvas onclone 回调在读取dom树后重新给svg写入样式。

           这种方法可以参考这位大神的 https://www.welefen.com/post/html2canvas-with-svg.html

    3）使用ReactSVG 在界面初始化后把样式写入svg

          ReactSVG  https://www.npmjs.com/package/react-svg

          该控件在svg加载后回调  beforeInjection 方法

       

<ReactSVG className="logo" src={this.getUrl("logo_black")} beforeInjection={this.logoBeforeInjection}/>

        为了适应不同的手机分辨率可以再回调中根据屏幕显示倍率计算尺寸

        

logoBeforeInjection = svg=>{
    // svg.classList.add('svg-class-name')
    // svg.setAttribute('style', 'width: 123px; height="171px')
    const pixe = window.devicePixelRatio as number

    svg.setAttribute('width',41*pixe+'px')
    svg.setAttribute('height',57*pixe+'px')
}

 

2. ios 微信浏览器内html2canvas 无法使用。

    这个将html2Canvas 改成旧版本rc4 就行 https://github.com/niklasvh/html2canvas/issues/2205

 v1.0.0-rc.4 地址 https://github.com/niklasvh/html2canvas/releases/tag/v1.0.0-rc.4