|
|
@@ -10,6 +10,9 @@ import ElementConfig from './elementConfig'
|
|
|
import './layout.less'
|
|
|
import Element from './element'
|
|
|
import '../../models/dataConnect'
|
|
|
+import html2canvas from 'html2canvas'
|
|
|
+import jsPDF from 'jspdf'
|
|
|
+
|
|
|
|
|
|
class DashboardDesigner extends React.Component {
|
|
|
|
|
|
@@ -24,6 +27,20 @@ class DashboardDesigner extends React.Component {
|
|
|
};
|
|
|
}
|
|
|
|
|
|
+ saveToPNG = (element) => {
|
|
|
+ html2canvas(element).then(function(canvas) {
|
|
|
+ var pageData = canvas.toDataURL('image/png', 1.0);
|
|
|
+
|
|
|
+ //方向默认竖直，尺寸ponits，格式a4[595.28,841.89]
|
|
|
+ var pdf = new jsPDF('', 'pt', 'a4');
|
|
|
+
|
|
|
+ //addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩
|
|
|
+ pdf.addImage(pageData, 'PNG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );
|
|
|
+
|
|
|
+ pdf.save('stone.pdf');
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
showElementConfigBox = (o) => {
|
|
|
this.setState({
|
|
|
@@ -141,6 +158,11 @@ class DashboardDesigner extends React.Component {
|
|
|
}}>
|
|
|
添加元素
|
|
|
</Button>
|
|
|
+ <Button onClick={() => {
|
|
|
+ this.saveToPNG(document.body)
|
|
|
+ }}>
|
|
|
+ 保存为PNG
|
|
|
+ </Button>
|
|
|
<span>编辑模式</span>
|
|
|
<Switch
|
|
|
checkedChildren="开"
|
zhuth