html+css 实现类似word目录效果并生成pdf

最新推荐文章于 2024-08-04 21:23:42 发布
最新推荐文章于 2024-08-04 21:23:42 发布
阅读量866 收藏 2
点赞数
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/carefreefly/article/details/127189372
版权

直接上码

<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <style>

        body {
            font-family: FangSong,HanaMinB;
            line-height: 1.2;
            /*设置背景色*/
            /*background: #00FF00 ;*/
            /*设置背景图片*/
            /*background-image:url(data:image/gif;base64,AAAA) no-repeat fixed top;*/
        }
        /** 指定pdf纸张大小 **/
        @page {
            size: A4 ;
            margin: 1cm;
            /*margin-bottom: 1cm;*/
            /*border: thin solid black;*/
        }

        .page_break { page-break-after:always;}
        .seclev2 {
            text-indent:20pt;
        }
        .seclev2c {
            text-indent:40pt;
        }
        a {
            text-decoration:none;
        }
        a:link {
            color:#000000;
        }
        a:visited {color:#00FF00;}
        ul li{list-style-type:none;}
        ul li div{display:inline-block;}
        .catalog-out{position:relative;width: 100%;height:17px}
        .catalog-line{border-top:1px dashed #d8d8d8; position: absolute;top:10px;margin:0.5px;width:98%;}
        .catalog-title{position: absolute;left:0px;padding:0.5px;z-index: 100;text-align: left;background:#ffffff;padding-right:20px;}
        .catalog-page-num{position: absolute;right:0px;padding:0.5px;z-index: 100;text-align: right;background:#ffffff;padding-left:20px;}

    </style>
</head>
<body>
<ul>

    <li>
        <div class="catalog-out">
            <div class="catalog-title">第一章 概要</div><div class="catalog-line">&nbsp;</div><div class="catalog-page-num">1</div>
        </div>
        <ul>
            <li>
                <div class="catalog-out">
                    <div class="catalog-title">1.1 xxxxxx</div><div class="catalog-line">&nbsp;</div><div class="catalog-page-num">1</div>
                </div>
                <ul>
                    <li>
                        <div class="catalog-out">
                            <div class="catalog-title">1.1.1 xxxxxx</div><div class="catalog-line">&nbsp;</div><div class="catalog-page-num">2</div>
                        </div>
                    </li>
                    <li>
                        <div class="catalog-out">
                            <div class="catalog-title">1.1.2 xxxxxx</div><div class="catalog-line">&nbsp;</div><div class="catalog-page-num">3</div>
                        </div>
                    </li>
                    <li>
                        <div class="catalog-out">
                            <div class="catalog-title">1.1.3 xxxxxx</div><div class="catalog-line">&nbsp;</div><div class="catalog-page-num">4</div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <div class="catalog-out">
                    <div class="catalog-title">1.2 xxxxxx</div><div class="catalog-line">&nbsp;</div><div class="catalog-page-num">1</div>
                </div>
            </li>
            <li>
                <div class="catalog-out">
                    <div class="catalog-title">1.3 xxxxxx</div><div class="catalog-line">&nbsp;</div><div class="catalog-page-num">5</div>
                </div>
            </li>
        </ul>
    </li>
    <li>
        <div class="catalog-out">
            <div class="catalog-title">第二章 总体设计</div><div class="catalog-line">&nbsp;</div><div class="catalog-page-num">6</div>
        </div>
        <ul>
            <li>
                <div class="catalog-out">
                    <div class="catalog-title">1.1 xxxxxx</div><div class="catalog-line">&nbsp;</div><div class="catalog-page-num">7</div>
                </div>
            </li>
            <li>
                <div class="catalog-out">
                    <div class="catalog-title">1.2 xxxxxx</div><div class="catalog-line">&nbsp;</div><div class="catalog-page-num">8</div>
                </div>
            </li>
            <li>
                <div class="catalog-out">
                    <div class="catalog-title">1.3 xxxxxx</div><div class="catalog-line">&nbsp;</div><div class="catalog-page-num">9</div>
                </div>
            </li>
        </ul>
    </li>
    <li>
        <div class="catalog-out">
            <div class="catalog-title">第三章 详细设计</div><div class="catalog-line">&nbsp;</div><div class="catalog-page-num">10</div>
        </div>
        <ul>
            <li>
                <div class="catalog-out">
                    <div class="catalog-title">1.1 xxxxxx</div><div class="catalog-line">&nbsp;</div><div class="catalog-page-num">11</div>
                </div>
            </li>
            <li>
                <div class="catalog-out">
                    <div class="catalog-title">1.2 xxxxxx</div><div class="catalog-line">&nbsp;</div><div class="catalog-page-num">12</div>
                </div>
            </li>
            <li>
                <div class="catalog-out">
                    <div class="catalog-title">1.3 xxxxxx</div><div class="catalog-line">&nbsp;</div><div class="catalog-page-num">13</div>
                </div>
            </li>
        </ul>
    </li>
</ul>
</body>

</html>

效果下图，随意伸缩：

关键的样式:

/* 去除ul自带的. 样式 */
ul li{list-style-type:none;}
/* 设置div不换行 */
ul li div{display:inline-block;}
/* 目录行最外层，定义内部为相对定位 */
.catalog-out{position:relative;width: 100%;height:17px}
/* 目录中间的线 */
.catalog-line{border-top:1px dashed #d8d8d8; position: absolute;top:10px;margin:0.5px;width:98%;}
/* 目录左侧标题 ，固定左侧，设置白底遮住部分line，伸缩不会发生举例变化 */
.catalog-title{position: absolute;left:0px;padding:0.5px;z-index: 100;text-align: left;background:#ffffff;padding-right:20px;}
/* 目录右侧页码 ，固定右侧，设置白底遮住部分line，伸缩不会发生举例变化*/
.catalog-page-num{position: absolute;right:0px;padding:0.5px;z-index: 100;text-align: right;background:#ffffff;padding-left:20px;}

也可以通过工具生成pdf：
https://gitee.com/Rayin/rayin

carefreefly
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5自动生成目录,利用html实现类似于word自动生成的目录的效果
weixin_34666478的博客
06-01 1545
在w体朋几一级发等点确层数框的很屏果行4带域ord中的自动生成目录当中，我们会看到是这样直分调浏器代，刚求的一学础过功互有解小久宗点差维含数如数围请的目录结构：嗯，讲过一围多元示一能近讲提下了多素效个外近自动生成固然是简单，但是在html当中，却没有一个合适的标签来去做。今天后台导出PDF的时候告诉我，他需要用html做一个这样的结构，然后想了想，实现了朋说事础发开和数目间的行或屏会。域标纯控以近...
HTML5+CSS3基础
nabirt的博客
10-19 1244
记录一下html+css的基础知识
CSS实例：用ul+li打造图书目录效果
ebuild的专栏
03-19 1549
ul无序列表是一个非常重要的HTML标签，页面中许多元素都用它来组织。就此问题，我们形成了下面的实例。图书目录往往由章节标题，页次，以及破折虚线组成。我们将章节标题建立链接以a标签组织。页次用行内元素span标签组织。这两部分内容分别处于一个独立的列表项li中。虚线的效果以li的背景图片来实现。下面开始HTML编码：     杂谈24则CSS网页布局开发小技巧 9    css expre
利用html实现类似于word自动生成的目录的效果
u011927449的博客
07-19 1003
在word中的自动生成目录当中，我们会看到是这样的目录结构： 嗯，自动生成固然是简单，但是在html当中，却没有一个合适的标签来去做。今天后台导出PDF的时候告诉我，他需要用html做一个这样的结构，然后想了想，实现了第一种方法： 一.js&css结合法 话不多说，直接上代码，代码解决 <head> <meta charset="UTF-8"> <title>Title</title> <style>
关于Java后台 HTML+CSS3 转换生成PDF文件问题求助！
bp001haha的博客
09-21 3234
/** * html生成pdf * @param ftlPath ftl模板目录路径 * @param ftlName ftl模板名称 * @param outputPath pdf输出路径 * @param outputName pdf输出名称 * @param htmlString html源码 * @param watermark 是否添加水印【true-添加、false=不添加】 * @return */ public static
java操作html和word生成pdf,可生成目录和表格
sinat_30356443的博客
09-05 2179
一:html转pdf 通过继承改写ITextRenderer使itextpdf支持html转pdf时添加页脚页眉 功能点一: 1,通过freemarker读取html模板,将html转为pdf 2,支持配置页脚页眉logo 3,支持html中直接引入css样式文件 4,解决img标签的图片不能写在src中的问题 5,支持汉字 功能点二...
html 自动列举目录,利用html实现类似于word自动生成的目录的效果
weixin_35888497的博客
06-02 560
在word中的自动生成目录当中，我们会看到是这样的目录结构：嗯，自动生成固然是简单，但是在html当中，却没有一个合适的标签来去做。今天后台导出PDF的时候告诉我，他需要用html做一个这样的结构，然后想了想，实现了第一种方法：一.js&css结合法话不多说，直接上代码，代码解决Title* {marker: 0;padding: 0;}p {300px;height: 20px;posi...
前端js生成自定义内容的PDF及word文件的实现
lingliu0824的博客
03-02 4024
1.生成pdf: 使用的插件：jspdf，jspdf-autotable，html2canvas （其中jspdf-autotable可以更方便的生成表格，jspdf本身也有生成表格的API，可以根据需要选择；html2canvas是截取网页中的dom元素为canvas对象，来构建屏幕截图,如果不需要此功能，可以不使用这个插件） jspdf API地址、jspdf-autotable样式配置参考 上面两个地址可以找到大部分使用和配置介绍，以下是一个小案例： 使用这个demo前需要注意：1.需要自己生成sim
python 合并word并生成目录_使用Python制作WORD报告
weixin_35662528的博客
01-12 736
在前面一期文章 使用Pandas、Jinja和WeasyPrint制作pdf报告 中我分享了如何使用HTML模板来创建pdf报告的方法。虽然pdf很不错，但更多的人实际上在用微软的WORD来操作文档。实际上对于用户来说，创建所需的模板会更加简单，该模板支持Word中所需的所有自定义格式，而不是尝试使用HTML + CSS。幸运的是，有一个库支持在python中进行MS Word 邮件合并。这种方法...
html下载PDF WORD
12-15
首先，`jspdf.debug.js`是用于生成PDF的JavaScript库——`jsPDF`。这个库允许开发者在浏览器端创建PDF文档，支持添加文本、图像、形状等元素。利用`jsPDF`，你可以把HTML页面的关键内容转换为PDF格式，使得用户可以...
亲测，以html形式显示或预览word，excel，pdf，txt
05-24
在IT行业中，以HTML形式显示或预览不同的文档格式，如Word、Excel、PDF和TXT，是一种常见的需求，尤其在Web应用中。本项目提供的源码着重于ASP.NET后台处理，利用特定的类库将这些文件转换为HTML，以便前端能够以...
word2html html2pdf
12-12
HTML转PDF的工具或库可能包括wkhtmltopdf、Puppeteer（基于Chrome的Headless浏览器）、PhantomJS等，它们能渲染HTML页面并生成PDF。 在压缩包子文件的文件名称列表中，只提到了"lib"，这通常意味着包含了一些库文件...
以html形式显示或预览word，excel，pdf，txt
10-08
通常需要第三方工具或库，这些工具能够解析PDF的页面、文本和图像，然后生成对应的HTML和CSS。 7. **TXT转HTML**： TXT文件是最简单的，只需要读取文本内容，然后在HTML中创建一个纯文本区域显示即可。 8. **前端...
word转PDF然后实现在线预览的功能.rar
06-21
在IT行业中，将Word文档转换为PDF格式并实现在线预览功能是一项常见的需求，尤其在Web应用中。这个压缩包“word转PDF然后实现在线预览的功能.rar”提供了一个技术解决方案，下面我们将深入探讨其中涉及的关键知识点...
HTML-08.表单标签
程小白的博客
08-04 68
【代码】HTML-08.表单标签。
Web开发-html篇-下
最新发布
Broken_x的博客
08-04 456
html中的大部分标签就已经写完了，这样的写出来的网页没有颜色，过于单调，过于简陋，这就要用到我们接下来要学的CSS和Javascript了，我会接着持续更新……
HTML-05新浪新闻-正文-排版
程小白的博客
08-03 141
【代码】【无标题】
HTML 段落
wjs2024的博客
08-04 231
HTML（超文本标记语言）是构建网页的标准语言，而段落是构成网页内容的基本单元。在HTML中，段落是通过<p>标签来定义的。本文将详细介绍HTML段落的相关知识，包括段落的基本结构、样式设置、以及在实际网页设计中的应用。
word文档生成html模板(freemarker)再转为pdf
05-15
Word文档生成HTML模板是指将Word文档中的内容和样式通过相应的工具转换为HTML格式，其中涉及到一些标记和开发语言的应用，如CSS、JavaScript和FreeMarker的语法。 FreeMarker是一种模板语言，通过模板、数据和指令...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值