【插件开发】导出内容为PDF 0.2版

Innis 2021-12-30 1508

效果演示:

 

0.2更新富文本和图片导出支持

代码:

/**
 * @title 导出为PDF0.2
 * @author Innis
 * @note 将当前页面导出为可编辑的PDF格式。
 */
// import "./print"
pluginManager.register('pdfExport', {
    after_docmenu_run() {
        plugin.menu.group.doc.sub.exportAs.sub.pdf = {
            label: "PDF",
            icon: "caret-right",
            action() {
                const ky = this.nv.ky;
                const bullets = plugin.memory.get(ky, true);

                let htmlPrintContent = plugin.pdfExport.html(bullets)
                let pageTopic = bullets.text

                htmlPrintContent = `<div id="printContent">${htmlPrintContent}</div>`;
                htmlPrintContent = htmlPrintContent.replace("</li></ul></div>", "</div>").replace(`<ul><li>${pageTopic}`, "");

                let regex1 = /<span ps='.'>(\S|\s)+?<\/span>/g;
                let subst1 = ``;
                let regex2 = /<span(\S|\s)+?>/g;
                let subst2 = ``;
                let regex3 = /<s ps='.'>(\S|\s)+?<\/s>/g;
                let subst3 = ``;
                htmlPrintContent = htmlPrintContent.replace(regex1, subst1)
                    .replace(regex2, subst2)
                    .replace(regex3, subst3)
                    .replace('data/user-data', 'https://roamedit.com/edit/data/user-data');

                $("body").append(htmlPrintContent);

                printJS({
                    printable: 'printContent',
                    type: 'html', header: pageTopic,
                    scanStyles: false,
                    documentTitle: pageTopic,
                    onLoadingEnd: function () { $("#printContent").remove(); },
                    style: "li::marker {color:silver;content:'•   ';} b[color=red]{color:#d9534f} b[color=green]{color:#5cb85c} b[color=blue]{color:#337ab7} b[color=yellow]{color:#f2b968} highlight{background-color:#fbe9cf;mso-highlight:yellow;color-adjust:exact;-webkit-print-color-adjust: exact;}"
                });

            }
        }
    },
    html(node) {
        let wrapTag = 'ul'
        function item2li(itemJson) {
            if (isEmpty(itemJson)) {
                return '';
            }
            let html = '';
            if (!isEmpty(itemJson.child)) {
                html += list2ul(itemJson.child);
            }
            return `<li>${itemJson.text || itemJson.ori}${html}</li>`;
        }
        function list2ul(listJson) {
            let html = '';
            for (const item of listJson) {
                html += item2li(item);
            }
            return `<ul>${html}</ul>`;
        }
        let html = item2li(node);
        if (!isEmpty(wrapTag)) {
            html = `<${wrapTag}>${html}</${wrapTag}>`;
        }
        return html;
    },

    run() {
        loadScript("https://unpkg.com/print-js@1.6.0/dist/print.js")
    }
});

注意事项:

打印的时候目标打印机请选择“另存为PDF”,这样打印出的PDF就是可以编辑了。

 

 

路线图(接下来准备实现的功能):

1.增加对导出代码的支持

2.增加对导出图片的支持 ✅

3. 增加对自定义css的支持(分选择类和代码类)

4. 增加辅助线

5. 增加对多级标题的支持

6.  导出前检测当前的样式

7. 依赖检测机制

快速回复
最新回复 (11)
  • sheen 2021-12-30
    0 2
    这个功能太需要了
  • 泉毅 2021-12-30
    0 3

    如何导出图片呢?我导出pdf的时候,图片都变成了链接代码。

  • Innis 2021-12-31
    0 4
    泉毅 如何导出图片呢?我导出pdf的时候,图片都变成了链接代码。

    接下来会陆续支持导出图片和代码块

  • leo 2021-12-31
    0 5
    点赞
  • HWB 2022-1-7
    0 6
    点赞,2.0出了吗?真的很期待。没有pdf笔记很难分享,打印
  • Innis 2022-1-7
    0 7
    HWB 点赞,2.0出了吗?真的很期待。没有pdf笔记很难分享,打印
    已经写好了,明天发👌
  • Innis 2022-1-14
    0 8
    0.2版本增加对富文本+图片导出的支持
  • leo 2022-1-14
    0 9
    Innis[社区志愿者] 0.2版本增加对富文本+图片导出的支持
    直接自动更新,不用自己安装是不
  • Innis 2022-1-15
    0 10
    leo 直接自动更新,不用自己安装是不
    需要重新安装代码
  • leo 2022-1-15
    1 11
    Innis[社区志愿者] 需要重新安装代码
    重新安装,图片还是没反应,加的颜色没有显示
  • Jasleen 2022-1-28
    0 12
    leo 重新安装,图片还是没反应,加的颜色没有显示
    +1111111
返回