wkhtmltopdf踩坑记录

news2024/11/27 1:15:07

1. 不支持writing-mode。

需求是文字纵向排列，内容从左到右，本来用的是writing-mode: tb-rl;，插件转pdf后发现失效。
解决方法：
让每一列文字单独用一个div容器包裹，对它的宽度进行限制，控制每一行只能出现一个文字，然后用定位布局【因为wkhtmltopdf不支持flex布局】。
对于特殊字符，例如：、。等标点符号，需要在其前或后加上br标签控制换行，否则会出现每行有一个字但是后面会跟着特殊符号的情况。
而且对于像括号、书名号这些符号，由于我们只是用了点技巧迫使它纵向排列，而不是书写顺序真的是从上到下，因此这些符号还是会横向显示。效果如下图：
在这里插入图片描述
而我们希望这些特殊符号也是遵循纵向的书写顺序的，因此我们需要用到transform属性的rotate来做一些2d的角度旋转效果。

/*都要写，注意兼容性，只写transform不会生效*/
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);

2.转成pdf时打印结果没有图片（访问不到html中引入的图片）

场景描述：我一开始用的命令行是直接将本地的html转pdf，然后就报了访问不到的错误，转出的pdf是没有本地html引入的图片的

报错：Warning: Blocked access to file
这是由 0.12.6 版本中默认行为的更改引起的。wkhtmltopdf现在默认禁用本地文件访问。可以通过添加命令行参数来解决

解决方法1：加上配置参数，允许本地文件加载其他的本地文件

wkhtmltopdf --enable-local-file-access  a.html b.pdf

解决方法2：在本地运行一下文件，然后用url的方式去转pdf。
在vscode上打开要转pdf的html，然后右键选择open with live server。然后再输入指定的url。这种方式就可以，我也不知道为什么。

wkhtmltopdf  http://127.0.0.1:5501/a.html ccc1.pdf

3.转化的pdf大小与html尺寸不吻合

看了配置参数可以设置page-zise或者page-width/page-height，我没有尝试，只是把整个container的大小设置成A4大小，a4转成px是794px*1123px，因此要设置成对应的大小。然后设计图的尺寸也要修改成对应的固定宽度794px，因为设计图上的所有元素的属性都会随尺寸变化而变化【px是像素大小，是相对长度单位，具体要看分辨率】

4.文字字体样式不生效

要引入字体文件。@font-face指定字体规则和它的url。

@font-face {
  font-family: "Kaiti";
  /* 重命名字体名 */
  src: url("../font/Kaiti.ttf") format("opentype");
  font-weight: normal;
  font-style: normal;
}