添加导出为PDF功能

Docusaurus本身并不提供导出为PDF的功能，很多HTML转PDF的工具都无法使用。如：

• jsPDF
• html2pdf

目前暂时无法使用三方库实现导出PDF的功能，本文中使用提供一种思路：借助打印功能，另存为PDF。

提示

后续找到替代方案后会修改本文内的实现方式。

增加打印文档按钮

本章的内容基于悬浮按钮章节。我们在悬浮按钮中增加一个按钮。

import React from 'react';
import clsx from 'clsx';
import { useWindowSize } from '@docusaurus/theme-common';
import { useDoc } from '@docusaurus/theme-common/internal';
import DocItemPaginator from '@theme/DocItem/Paginator';
import DocVersionBanner from '@theme/DocVersionBanner';
import DocVersionBadge from '@theme/DocVersionBadge';
import DocItemFooter from '@theme/DocItem/Footer';
import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
import DocItemContent from '@theme/DocItem/Content';
import DocBreadcrumbs from '@theme/DocBreadcrumbs';
import Unlisted from '@theme/Unlisted';
import styles from './styles.module.css';
import GiscusComment from '@site/src/components/GiscusComment';
import { FloatButton, Modal } from 'antd';
import { FilePdfOutlined, PrinterOutlined } from '@ant-design/icons';

/**
 * Decide if the toc should be rendered, on mobile or desktop viewports
 */
function useDocTOC() {
    const {frontMatter, toc} = useDoc ();
    const windowSize = useWindowSize ();
    const hidden = frontMatter.hide_table_of_contents;
    const canRender = !hidden && toc.length > 0;
    const mobile = canRender ? <DocItemTOCMobile/> : undefined;
    const desktop =
        canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
            <DocItemTOCDesktop/>
        ) : undefined;
    return {
        hidden,
        mobile,
        desktop
    };
}

export default function DocItemLayout({children}) {
    const docTOC = useDocTOC ();
    const {
        metadata: {unlisted}
    } = useDoc ();

    const downloadPDF = () => {
        Modal.info({
            title: '下载PDF',
            width: 500,
            content: (
                <div>
                    <p>目前无法借助插件实现直接下载为PDF的功能，需要在弹出的打印窗口中，将目标打印机设置为"另存为PDF"（不同浏览器选项可能不同），通过打印功能来实现PDF下载</p>
                    <p>点击“确定”，将弹出打印对话框。</p>
                </div>
            ),
            onOk() {
                setTimeout(()=>window.print(), 1000);
            },
        })
    };

    const printArticle = () => {
        window.print();
    };
    return (
        <div className="row">
            <div className={clsx ('col', !docTOC.hidden && styles.docItemCol)}>
                {unlisted && <Unlisted/>}
                <DocVersionBanner/>
                <div className={styles.docItemContainer}>
                    <article>
                        <DocBreadcrumbs/>
                        <DocVersionBadge/>
                        {docTOC.mobile}
                        <DocItemContent>{children}</DocItemContent>
                        <DocItemFooter/>
                    </article>
                    <DocItemPaginator/>
                </div>
                <GiscusComment class="giscus-comment"/>
            </div>
            {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
            {/*<FloatButton.BackTop />*/}
            <FloatButton.Group shape="circle" style={{right: 24}} className="article-float-buttons">
                <FloatButton icon={<PrinterOutlined/>} title="打印文档" onClick={printArticle}/>
                <FloatButton icon={<FilePdfOutlined/>} title="下载PDF" onClick={downloadPDF}/>
                <FloatButton.BackTop visibilityHeight={0}/>
            </FloatButton.Group>
        </div>
    );
}

tsx

点击“下载PDF”按钮，弹窗提示用户可以通过"另存为PDF"间接实现下载PDF的功能。

点击“OK”按钮，弹出打印窗口。

在“目标打印机”中选择“另存为PDF”可以将文档保存为PDF