为markdown导出的pdf添加页眉页脚

为Markdown导出的PDF添加页眉页脚

环境

  • vscode
  • 扩展:Markdown PDF

操作方式

  • 快捷键 Ctrl+, 打开设置
  • 搜索 "markdown-pdf"
  • 找到设置
    • 页眉: Markdown-pdf: Header Template
    • 页脚: Markdown-pdf: Footer Template

页眉插入示例内容:

此处使用base64内嵌图片(图片转base64工具:https://www.base64-image.de/

html 复制代码
<div style="display: flex; justify-content: space-between; align-items: center; font-size: 10px; margin: 0 1cm;">
    <img src="data:image/png;base64,示例base64编码图片" style="height: 30px;">
</div>
  • display: flex; 设置容器为Flex布局,使子元素可以灵活排列。
  • justify-content: space-between; 使子元素在主轴方向上平均分布,首尾元素贴近容器边缘。
  • align-items: center; 使子元素在交叉轴方向上居中对齐。
  • font-size: 10px; 设置文字大小为10像素。
  • margin: 0 1cm; 设置容器的左右边距为1厘米。
  • src="data:image/png;base64,示例base64编码图片" 使用base64编码的图片作为图片源。
  • style="height: 30px;" 设置图片高度为30像素。

页脚插入示例信息:

html 复制代码
<div style="border-top: 1px solid #000; font-size: 8px; margin: 0 1cm; padding-top: 5px;">
    <div style="display: flex; justify-content: space-between; align-items: center; line-height: 1.5; white-space: pre;">
        <span>示例公司名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;示例地址&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;示例电话号码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;示例网站</span>
    </div>
</div>
  • border-top: 1px solid #000; 在容器顶部添加一条1像素的黑色实线边框。
  • font-size: 8px; 设置文字大小为8像素。
  • margin: 0 1cm; 设置容器的左右边距为1厘米。
  • padding-top: 5px; 设置容器顶部内边距为5像素。
  • display: flex; 同上,设置为Flex布局。
  • justify-content: space-between; 同上,使子元素在主轴方向上平均分布。
  • align-items: center; 同上,使子元素在交叉轴方向上居中对齐。
  • line-height: 1.5; 设置行高为1.5倍的字体大小。
  • white-space: pre; 保持文本中的空白符(如空格和换行),不折行。
  • span 标签用于包裹文本内容,&nbsp; 表示非断行空格,用于控制文本间距。

注意: 虽然这个插件支持HTML和CSS,但有些功能可能需要自行调整。

相关推荐
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
东华果汁哥1 天前
【URL 转换为PDF】HTML转换为PDF
前端·pdf·html
诸葛大钢铁2 天前
Excel转PDF的三种方法
笔记·职场和发展·pdf·excel
爱分享的飘哥2 天前
第二十一 篇 PDF文档自动化:Python一键合并、分割、水印、提取与加密解密!你的PDF全能管家!
python·pdf·python操作pdf·pdf 加解密·pdf 分割和合并
簪花走马过长安3 天前
【PDF识别改名】使用京东云OCR完成PDF图片识别改名,根据PDF图片内容批量改名详细步骤和解决方案
ui·pdf·ocr·excel·京东云·wps·图片区域识别重命名
ComPDFKit3 天前
为什么有些PDF无法复制文字?原理分析与解决方案
人工智能·pdf·ocr
开开心心就好3 天前
电脑桌面整理工具,一键自动分类
运维·服务器·前端·智能手机·pdf·bash·symfony
咖啡色格调3 天前
Java使用itextpdf7生成pdf文档
java·pdf·maven
开开心心_Every3 天前
可增添功能的鼠标右键优化工具
开发语言·pdf·c#·计算机外设·电脑·音视频·symfony
余大侠在劈柴4 天前
pdf.js 开发指南:在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf