Skip to content

Instantly share code, notes, and snippets.

@kuc-arc-f
Last active January 5, 2022 06:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kuc-arc-f/1c833acb9f27bc57b4e88bf9d4d9bd7b to your computer and use it in GitHub Desktop.
Save kuc-arc-f/1c833acb9f27bc57b4e88bf9d4d9bd7b to your computer and use it in GitHub Desktop.
jsPdf + html2canvas , addPage sample
/* jsPdf + html2canvas , addPage sample */
import React from 'react'
const { jsPDF } = require("jspdf");
import html2canvas from 'html2canvas';
import TableBox1 from './TableBox1';
import TableBox2 from './TableBox2';
interface IProps {
history:string[],
}
//
class Test extends React.Component<IProps> {
constructor(props: any) {
super(props);
this.state = {data: ''}
}
componentDidMount(){
}
pdfPrint(){
const doc = new jsPDF({
orientation: 'p',
format: 'a4',
});
// async
(async() => {
const elem = document.querySelector<HTMLElement>("#test1");
await html2canvas(elem, {scale: 2}).then(function(canvas) {
const dataURI = canvas.toDataURL("image/jpeg");
document.body.appendChild(canvas);
const width = doc.internal.pageSize.width;
doc.addImage(dataURI, 'JPEG', 0, 0, width, 0);
});
//test2
const test2 = document.querySelector<HTMLElement>("#test2");
await html2canvas(test2, {scale: 2}).then(function(canvas) {
const dataURI = canvas.toDataURL("image/jpeg");
document.body.appendChild(canvas);
const width = doc.internal.pageSize.width;
doc.addPage();
doc.addImage(dataURI, 'JPEG', 0, 0, width, 0);
});
doc.save("p10.pdf") ;
})()
}
render(){
return(
<div className="container">
<h1>pdf10 / html2canvas</h1>
<hr />
<button onClick={() => this.pdfPrint()}>Print</button>
<hr />
<div id = "test1">
<TableBox1 />
</div>
<div id = "test2">
<TableBox2 />
</div>
<hr />
</div>
)
}
}
export default Test;
import * as React from 'react';
export default function TableBox1() {
return (
<div>
<h3>テーブル サンプル</h3>
<hr className="my-2" />
<table className="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>マーク</td>
<td>史郎</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>ヤコブ</td>
<td>次郎</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>ほげ</td>
<td>太郎</td>
<td>@hoge1</td>
</tr>
<tr>
<th scope="row">4</th>
<td>ふが</td>
<td>太郎</td>
<td>@fuga1</td>
</tr>
</tbody>
</table>
</div>
);
}
import * as React from 'react';
export default function TableBox2() {
return (
<div>
<h3>テーブル サンプル2</h3>
<hr className="my-2" />
<table className="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>マーク22</td>
<td>史郎</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>ヤコブ22</td>
<td>次郎</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment