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版权协议,转载请附上原文出处链接和本声明。