使用 html2pdf.js 转换时的样式问题

问题描述

<html>
<head>
<link href='http://mw.charchoob.info/byekan.css' rel='stylesheet' type='text/css'>
</head>
<body>
   <script src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>
<script>
const opt = {
      margin: 0,filename: 'Test.pdf',image: { type: 'png',quality: 1 },html2canvas: { scale: 1},jsPDF: { unit: 'in',format: 'a4',orientation: 'portrait' }
    };
 function myFunction1() {
 
 const content = document.getElementById('test1');
content.style.color='blue'

    html2pdf().set(opt).from(content).save();
}
  function myFunction2() {
 
 const content = document.getElementById('test2');
content.style.color='blue'
 
    html2pdf().set(opt).from(content).save();
}

function myFunction3() {
 
 const content = document.getElementById('test3');
content.style.color='blue'
 
    html2pdf().set(opt).from(content).save();
}
 
</script>

<button onclick="myFunction1()">Test without word-Wrap & without position absolute</button>
<button onclick="myFunction2()">Test with word-wrap & without position absolute</button>
<button onclick="myFunction3()">Test with word-wrap & position absolute</button>
</script>
 
<div id="test1" style="font-weight=bold;font-style=normal;font-family:B Yekan;font-size:21px;line-height: 1.2;text-align:center;overflow:hidden;color:Red;background-color:transparent;direction:rtl;border:none;width:718.2px;height:28.35px;">پیش فاکتور یک </div>

<div id="test2" style="font-weight=bold;font-style=normal;font-family:B Yekan;font-size:21px;line-height: 1.2;text-align:center;overflow:hidden;color:Red;background-color:transparent;direction:rtl;border:none;width:718.2px;height:28.35px;word-wrap:break-word;">پیش فاکتور دو</div>

<div id="test3" style="font-weight=bold;font-style=normal;font-family:B Yekan;font-size:21px;line-height: 1.2;text-align:center;overflow:hidden;color:Red;background-color:transparent;direction:rtl;border:none;width:718.2px;height:28.35px;position:absolute;word-wrap:break-word;">پیش فاکتور سه</div>

</body>
</html>

当我点击第一个按钮时，我没有任何问题，我的 HTML 页面转换为 PDF 页面

但是当我单击具有 position:absolute;word-wrap:break-word 样式的第二个和第三个按钮时，它无法正常工作，或者什么也不显示

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html html2pdf javascript