Question

所以我正在尝试打印html，但是样式很少，我尝试了我所知道的所有东西，但是我没能完成它。一切都工作正常，以为无法设置HTML样式。将其与样式标签属性绑定，但仍然无法正常工作。

我的代码是

FirebaseAutomaticScreenReportingEnabled

任何帮助都会得到赞赏。

Answer 1

<html>
<head>
    <style>
        .heading{
        background-color: red;
        }
        .block {
        background-color: black;
        height: 30;
        }
        .text{
        color: white;
        }
    </style>
</head>
<body>
    <h1 class='heading'>Title</h1>
    <div class='block'>
        <span class='text'>Hello, World !</span>
    </div>
</body>

我能够通过将上述HTML存储在反引号（``）中并像这样使用

来对其进行样式设置

RNPrint.print({
  html: `<html>... ....</html>`
})

Answer 2

您可以以此为指导。对我来说很好。

<page size="A4"></page>
 <page size="A4"></page>
 <page size="A4" layout="landscape"></page>
  <page size="A5"></page>
  <page size="A5" layout="landscape"></page>
  <page size="A3"></page>
  <page size="A3" layout="landscape"></page>
body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="landscape"] {
  width: 29.7cm;
  height: 21cm;  
}
page[size="A3"] {
  width: 29.7cm;
  height: 42cm;
}
page[size="A3"][layout="landscape"] {
  width: 42cm;
  height: 29.7cm;  
}
page[size="A5"] {
  width: 14.8cm;
  height: 21cm;
}
page[size="A5"][layout="landscape"] {
  width: 21cm;
  height: 14.8cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}

https://codepen.io/rafaelcastrocouto/pen/LFAes

使用react-native-print时如何设置HTML样式

2 个答案: