风也温柔

计算机科学知识库

css制作 分享一个我最近制作的小工具,可以把网页文档制作成PDF文档

  写这个工具的原因

  有一些好的教程只有在线文档,没有离线文档,即使有离线文档也不一定是pdf文档。pdf 文档是一种非常不错的格式,无论在手机、电脑还是平板上看,文档的排版都是一致的。而且我有个ipad,如果拿来看文档肯定是非常舒服了,所以我就写了这个工具。

  最早写这个工具的时候还是几年前,当时为了制作一份 的pdf文档,就写了一个 专用的,只能制作 的文档。后来我就想能不能搞一个通用的,于是就有了这个工具的初代。虽然能用,不过扩展性一般,如果你想弄一个别的文档css制作,略微有些复杂。

  最近我终于有点时间了,于是重写了这个项目,使扩展这个项目更加简单。

  工具的基本原理

  工具基本原理其实很简单,写一份抓取网页文档的程序,然后把网页存到本地,最后调用转换程序把html 文档转换为 pdf 文档。

  处理网页最方便的语言就是 了,这个工具抓取网页使用的就是,使用时先打开要抓取的网站,然后打开浏览器控制台,把脚本复制进去,利用js强大的功能,提取网页内容轻轻松松。

  制作淘宝css模板_div css制作简单网页_css制作

  当然,一个web文档一般都是很多网页的,所以需要用js分析结构,然后用ajax 或者 fetch 全部抓取下来。由于在控制台执行,所以同源不会出现跨越问题。

  如何保存

  抓取的网页这么保存的呢?答案是通过http post到我本地的web api ,这个程序是使用 vue3 + vite 编写的,而 vite实际上就是一个静态web文件服务器,不过他还能处理一些js模块的工作。这个程序的一部分以插件的形式嵌入vitecss制作,所以可以通过http服务来保存post过来的文档数据,至于跨越问题,vite是支持html5的跨域功能的,所以抓取脚本可以顺利的把数据post过来。

  怎么使用这个工具

  因为这是一个 node.js 项目,所以需要先安装 node.js 环境,推荐版本为 v16.16.0 或者更高版本。

  div css制作简单网页_css制作_制作淘宝css模板

  此外还需要安装,用于转换 pdf 文件,安装成功之后,需要把 ebook- 程序所在的目录加入系统PATH环境变量。

  <pre class="hu60_code">`# clone项目到本地
git clone https://github.com/liuguangw/pdf-builder.git
cd pdf-builder

 以pnpm工具运行命令example

<p>div css制作简单网页_css制作_制作淘宝css模板

 安装项目依赖(只需要在安装时执行)

pnpm install

 启动server

pnpm run dev

 然后用浏览器打开 http://127.0.0.1:5173

  div css制作简单网页_css制作_制作淘宝css模板

 根据提示进行即可

`</pre></p>
  展示图

  css制作_div css制作简单网页_制作淘宝css模板

  div css制作简单网页_css制作_制作淘宝css模板

  css制作_div css制作简单网页_制作淘宝css模板

  最后

  项目地址:

  详细使用说明请参考我写的wiki: 使用说明

  你如果也想加一个自定义文档css制作 分享一个我最近制作的小工具,可以把网页文档制作成PDF文档,可以看的扩展说明,理论上只要稍微懂一点点js的都会扩展

  最后附上我这两天制作的两份pdf文档,当然你们也可以尝试用我的这个工具自己做一个pdf

  Vue 3 中文文档

  Vue 3 API文档

  文章来源:https://www.hu60.cn/q.php/bbs.topic.103651.html