上百页html生成pdf解决方案(bookjs-easy)简洁完整版(包含接收服务端返回路径参数)

依靠 1:客户端插件 bookjs-easy(点击直接跳转官网)

  2: 服务端插件screenshot-api-server

实测105页的pdf,生成耗时40s左右,文件大小16MB

项目需求:生成一个上百页的pdf,这个pdf包含表格、折线图、图片等,且横竖幅页面交叉

 

bookjs-easy官网的文档对于第一次看的人来说并不友好(建议第一次还是要读一遍,不然后面更费时间),有些地方容易摸不着北,接下来我写一下主要步骤或提醒

1.首先去官网拉代码bookjs-easy,然后运行,这时候你发现生成的按钮(不是预览打印,是生成pdf直接保存到本地)请求报错,说连接服务器失败之类的

  因为你需要自己启动一个服务端,用来替换官方的接口(因为2023.07.01以后官方接口就不开放支持了)服务端项目地址(点击即可)这个服务端两种办法1是本地,2是docker,我和官网一样也强烈推荐docker,方便快捷。

  访问你的服务器后(你得先有docker),依次执行下面的两行命令,第一行是拉取,第二步是执行,不会参数的不要改动,复制执行即可,如果报端口already使用的,改下端口,比如把命令行中的端口即 第一个3000改成3010 -p 3010:3000 

docker pull wuxue107/screenshot-api-server

## -e MAX_BROWSER=[num] 环境变量可选,最大的puppeteer实例数,忽略选项则默认值:1 , 值auto:[可用内存]/200M
##  -e PDF_KEEP_DAY=[num] 自动删除num天之前产生的文件目录,默认0: 不删除文件
docker run -p 3000:3000 -td --rm -e MAX_BROWSER=1 -e PDF_KEEP_DAY=0 -v ${PWD}:/screenshot-api-server/public --name=screenshot-api-server wuxue107/screenshot-api-server

启动后把你的请求生成pdf地址换成域名+端口,然后模仿官网模板发起请求即可(建议你的前端项目也和这个docker放一个服务器,能减少很多麻烦)

 然后成功请求后的日志大概是这样的(查看日志的命令行: docker logs 你容器执行的项目id,查看id的命令行:docker ps -a 最前面的CONTAINER ID就是id)

 

要注意的是这个 API: http://localhost:3000/api/book  换成你的接口以后会自动拼接api/book,导致请求失败需要注意,可以在docker中查看此服务的日志

还有一个点,有时候会发现路径貌似没问题,但日志还是报错

着重看这个红框里的,这种其实就差一步 http://localhost:3000/ ,前端的请求需要拿掉”/“,试一次,就成功请求了

2. 接下来是扩展操作,目前我们生成的pdf是直接保存到本地的,如果说还需要这个文件,但“恰巧”本地文件没了,不可能每次都去下载,这就需要我们拿服务器上的文件

  已知每次生成都会存一份到服务器上,生成规则代码位置如下,有需要的可以自己拉代码酌情更改使用

源码会按日期分类保存文件,生成接口返回的参数如下

 接收方法如下,就写在我们之前请求生成的pdf方法下面

$(document).on('book.before-server-print',function(e,printInfo){console.log(printInfo)})

3. 至于横竖页面的解决办法,第一种,前端直接写横的,第二种前端控制旋转,把已写好的横页转一下,参考代码在下面。

<!DOCTYPE html>
<html>
<head>
<style>
  /* 使整个页面内容旋转90度 */
  body {
    transform: rotate(90deg);
    /* 确保页面居中旋转,并适应视口 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    width: 100vh; /* 旋转后,原宽度变为高度 */
    height: 100vw; /* 原高度变为宽度 */
    margin-top: -50vh; /* 调整垂直位置 */
    margin-left: -50vw; /* 调整水平位置 */
    overflow: auto; /* 确保可以滚动查看未在视口内的内容 */
  }
  
  /* 可选:如果需要,可以对特定元素进行进一步的调整以优化显示效果 */
  /* 例如,调整表格的宽度和高度以适应旋转后的布局 */
  table {
    width: 100%; /* 根据需要调整表格宽度 */
    height: auto; /* 或调整高度 */
  }
</style>
</head>
<body>
  <h1>标题也会旋转</h1>
  <table border="1">
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
    </tr>
    <tr>
      <td>单元格3</td>
      <td>单元格4</td>
    </tr>
  </table>
  <p>这段文字和上面的表格都会随着页面旋转90度。</p>
</body>
</html>

 

posted @ 2024-05-16 16:59  素衣如岚  阅读(24)  评论(0编辑  收藏  举报