react 使用jspdf导出dom中文乱码

1.在本机选择合适的中文字体

将本机字体选择一个需要的放在桌面上

2.下载jspdf.zip(https://github.com/MrRio/jsPDF

浏览器打开

将第一步选择的字体放入文件中创建出js 字体文件

 

 这个为创建出的字体文件

3.将下载好的包放到要导出dom的页面下

 

4.本地安装jspdf包

npm install jspdf --save

5.引入jspdf和中文包

 

6.创建导出方法

在dom的样式里面引入字体这个很重要还有就是要设置dom的宽度

 

7完整代码

import React, { Component } from 'react';  
import  './index.css'
import jsPDF from "jspdf";
import ReactDOMServer from "react-dom/server";
import itemBg from '../../assets/itemBg.png'  
import  './simkai-normal'

class Index extends Component {
state = { 
} 
addOne = e => {   
  if(e.keyCode == '13') {
      this.props.addTodo(e.target.value)
  } 
}
 exportPDF = () => {
    let element = (
      <div>
            <img className='bg' style={{width:'400px'}} src={itemBg}/>
            <div style={{fontFamily:'simkai',width:'400px'}}>中文</div>
            <div>23123</div>
      </div>
    );
    const doc = new jsPDF();  
    doc.setFont('simkai');   
    doc.html(ReactDOMServer.renderToString(element), {
      callback: function (doc) {
        doc.save('sample.pdf');
      }
    });
  };
render() {
  return (
    <div>
        <div>
            <img className='bg' style={{width:'400px'}} src={itemBg}/>
            <div>中文</div>
            <div>23123</div>
        </div> 
        <button onClick={this.exportPDF}>export</button>
    </div> 
    );
} 
}

export default Index;

8.效果图

 

 


版权声明:本文为weixin_43886340原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。