🎉
React でプレゼンボードができちゃう React Speaker board で PDF ダウンロード機能追加しました 🎉
はじめに
自作 OSS の React Speaker board v0.3.2 リリースしました!
React Speaker board とはなんぞや?という人は、以下の記事参照してください!
ダウンロードはこちらから!
npm
公式サイト
PDF ダウンロード機能追加した話
今回、PDF ダウンロード機能追加しました。
SpeakerDeck にも配信可能です。
技術的な話
以下パッケージを使ってます。
- html2canvas
- jsPDF
ブラウザのリサイズも考慮した、スライドのサイズ取得から PDF 化で苦戦しましたが、
最初のスライドを html2canvas で画像化して、横幅と縦幅だけ取得、その後 PDF 化の処理を入れました。
ただ、ゴリ押し感が強い処理になってしまったので、追々リファクタリング入れたいですね。
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
export const useReactSpeakerBoardPdf = () => {
const downloadPdf = async (slide: (() => JSX.Element)[], fileName?: string) => {
const slideLength = slide.length;
// Get the width and height of the slide
const target = document.getElementById(`slide-1`);
if (target === null) return;
const { width, height } = await html2canvas(target)
const pdf = new jsPDF({
orientation: 'l',
unit: 'px',
format: [width / 5, height / 5],
});
for (let i = 1; i <= slideLength; i++) {
const target = document.getElementById(`slide-${i}`);
if (target === null) return;
const canvas = await html2canvas(target)
const imgData = canvas.toDataURL('image/svg', 1);
pdf.addImage(imgData, 'SVG', 0, 0, canvas.width / 5, canvas.height / 5, `slide-${i}`);
if (i !== slideLength) pdf.addPage();
}
pdf.save(fileName ?? "reactspeakerboard.pdf");
};
return { downloadPdf };
}
最後に
ドキュメントはこちらです。今後もどんどん機能拡張していきたいと思います!
Discussion