marked+html2pdf实现markdown文本转a4纸张大小pdf格式文档代码-html代码-BFW代码库

marked+html2pdf实现markdown文本转a4纸张大小pdf格式文档代码

代码语言：html

所属分类：其他

代码描述：marked+html2pdf实现markdown文本转a4纸张大小pdf格式文档代码

代码标签： marked jspdf html2pdf文本转 a4 纸张大小 pdf 格式文档代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Markdown → A4 PDF</title>
  <style>
    :root{
      --page-w: 210mm;         /* A4 竖向宽度 */
      --page-h: 297mm;         /* A4 竖向高度 */
      --page-pad: 14mm;        /* 页面内容留白 */
      --bg: #f5f7fb;
      --radius: 8px;
      --border: #e5e7eb;
      --text: #111827;
    }
    * { box-sizing: border-box; }
    body{
      margin: 0;
      font-family: system-ui,-apple-system,Segoe UI,Roboto,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
      background: var(--bg);
      color: var(--text);
    }
    .app{ max-width: 1200px; margin: 24px auto; padding: 0 16px; }
    h1{ font-size: 20px; margin: 8px 0 16px; }
    .toolbar{
      display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;
    }
    .toolbar > * { height: 36px; }
    button, select{
      border: 1px solid var(--border);
      background: #fff; border-radius: 8px; padding: 0 12px; cursor: pointer;
    }
    button.primary{
      background: #2563eb; color: #fff; border: none;
    }
    .container{
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;
    }
    #md{
      width: 100%; height: 70vh; resize: vertical;
      background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
      padding: 12px; font-size: 14px; line-height: 1.6;
      font-family: ui-monospace,Menlo,Consolas,monospace;
    }
    .preview-wrap{
      display: flex; justify-content: center; align-items: flex-start;
      overflow: auto; max-height: 80vh; padding: 4px;
    }
    .print-page{
      width: var(--page-w); min-height: var(--page-h);
      background: #fff; color: #111;
      padding: var(--page-pad);
      box-shadow: 0 6px 24.........完整代码请登录后点击上方下载按钮下载查看