前端之HTML页面转换PDF总结

iconyy
759 阅读4分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

brief introduction

给一份PDF文档，利用html和css复原PDF，最后将制作好的html页面给后端转化为PDF，检测两
个PDF差异性是否符合要求。

写html页面遇到的问题总结

  1. 任务是指定了字体和页面宽度，字体与PDF中字体不同，字符之间间距不同，导致一行宽度内可放置的词数量不同。
  2. 原PDF中有 ‘...’ 字符，但是该字符在原PDF中间隔比较大，因此我考虑到使用letter-spacing来增大字符之间的间隔，后来经测试 该样式转换成PDF无效，html页面样式良好，但是转换出来的PDF却出现样式缩进问题，格式不符合要求。
  3. PDF中有表格，有输入内容，我考虑使用div+border来实现表格效果，input来实现输入功能。由于PDF是指定宽度，后期也有可能改变，因此每一行的每个div考虑使用百分比设置其宽度，但是也得考虑到继承宽度border宽度，如果有border宽度直接设置一行div宽度之和为100%会出现格式混乱。
  4. 最困难的问题是html页面看上去效果比较好，但是转换出来的PDF格式会出现问题，有以下几个方面
  • 1.PDF有不支持的前端标签，使用标签前端效果良好，但是PDF出现格式问题
  • 2.PDF转换后的字符之间缩进会改变，html页面比例很好的一行文字，PDF会缩进或者撑开，撑开就是另起一行，缩进是行末端出现空白，这让我改动的时候得考虑到html和PDF的效果，如果想要实现完全一致比较困难，就是因为PDF和html缩进效果不同的原因。
  1. HTML同时引用多个字体，但是在转换成PDF后有字体失效，自动转换成Times new roman字体。
  2. 在文字前插入三角形不能实现居中效果。

解决问题的方法总结

  1. 有问题及时找领导沟通，一方面领导会提供思路，另一方面，有些改动需要领导决定是否可操作
  2. 针对问题一： 考虑到一行要放置单词数量需要与原PDF相同，但是letter-spacing标签不可用，考虑通过设置字体大小的方法来实现一行放置指定数量的单词。
  3. 针对问题二：使用过两种方法，首先试用letter-spacing，PDF无效，第二次试用两端对齐样式，同样无效。letter-spacing实现每个字符之间的间距增大，Word-spacing实现单词与单词之间间距增大。最后的方法是使用 “&nbsp ;” 来解决。
        center-align {
            width: 100%;
            text-align: justify;
            text-align-last: justify;
        }
  1. 针对问题三，使用百分比进行宽度设置，但是盒子宽度之和小于一百，手动测试。
  2. 针对问题四，记录下无效的标签(letter-spacing,word-spacing...)，之后不再使用，找新的方法完成html效果，最后再找后端测试PDF样式是否可行，不可行就记录下来，直到样式可行。
  3. 针对问题五，要分开引用字体，一起引用html有效，但是转换成的PDF会直接转换成times new Roman
        @font-face {
            font-family: Helvetica;
            src: url('./fonts/Helvetica Regular.ttf');
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: Helvetica Bolder;
            src: url('./fonts/Helvetica-Neue-Condensed-Black.ttf');
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: Helvetica Bold;
            src: url('./fonts/Helvetica Bold.ttf');
            font-weight: normal;
            font-style: normal;
        }
  1. 针对问题六，使用伪元素来实现效果。
        .jiantou::before {
            position: absolute;
            content: '';
            border-width: 6px 10px 6px 10px;
            border-style: solid;
            border-color: transparent transparent transparent black;
            left: -15px;
            top: 31%;
        }

心得体会

  • 在写程序之前要先对整体布局构思，代码要写清楚注释，注释尽量语义化，代码分层要清晰，不然后期修改会有很多烦恼。
  • 应该学点后端知识，可以解决一大部分烦恼。
  • 多找领导沟通问题，多问问。

wkhtmltopdf.org/ 这个链接可以进去下载，下载后安装，找到bin文件，用cmd指令进行操作 image.png 第一个参数：wkhtmltopdf.exe所在的路径； 第二个参数：需要转换为pdf的html页面； 第三个参数：pdf文件路径及文件名。

用这个自己就可以进行调试了，不用一次一次找后端测试，它与后端测试的效果相同。

转换方法参考：www.cncsto.com/article/918…

avatar
文章
阅读
粉丝