css 像MS WORD一样自动将html页面划分为多个页面

50few1ms  于 2023-02-26  发布在  其他
关注(0)|答案(2)|浏览(180)

有没有办法把一个包含div,p和table标签的html上下文分割成一个定义高度的单独的div标签(或者至少是单独的)页面?(像ms word,但是在线)
我想创建一个html模板的正式信件,可能有多个页面。期望通过使用php或javascript或只是html和css的解决方案。
我用的是波斯文字体,不是英文!
顺便问一下,有没有其他方法来创建这些类型的模板?(不使用第三方网站)...如果有,请给出一个例子。
请注意,我想创建pdf和图像和ms word文档从html太!
谢谢:)

vq8itlhq

vq8itlhq1#

只要html和css你就可以实现它。看看我下面的代码。

<style>

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}
</style>

<div class="container pageBreak">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit necessitatibus nihil incidunt officia labore blanditiis atque soluta, optio laboriosam voluptates fugit, sint porro iure deleniti eveniet dolor voluptas, possimus repellat.
</div>
<div class="container pageBreak">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit necessitatibus nihil incidunt officia labore blanditiis atque soluta, optio laboriosam voluptates fugit, sint porro iure deleniti eveniet dolor voluptas, possimus repellat.
</div>

你可以使用ctl + p在windows或cmd+p在mac打印pdf

cgfeq70w

cgfeq70w2#

欢迎来到堆栈溢出!
不看代码很难回答你的问题。如果你创建一个尽可能简单的例子来演示你正在做什么,你已经尝试了什么,你想要实现什么,并在你的问题中包括代码,你会得到最好的答案。开发人员喜欢看代码:)
但是,由于这是您在Stack Overflow上的第一篇帖子,我希望您感到受欢迎,所以我将尝试对您在标题中提出的问题给出一个简单的答案;如何在打印HTML页面时自动将其分为几个页面?
关键字是css属性break-insidebreak-after
如果你有这样的东西:

<article>
  <p>Some paragraph</p>
  <p>Another paragraph</p>
</article>

您希望文章中的内容在必要时自动分页,但不希望使用分页符来分割段落-您希望任何分页符都出现在段落 * 之后 *,因此您为article { break-inside: auto; }p {break-inside: avoid; break-after: auto; }设置了css规则
下面是一个完整的示例:
CSS:

body {
  margin: 0;
}

section > header {
  height: 2in;
  text-align: center;
}

article {
  margin: 0 1in;
  break-inside: auto;
}

article > header {
  display: flex;
  flex-direction row;
  justify-content: space-between;
}

h1,h2 {
  margin-top: 0
}

p {
  break-inside: avoid;
  break-after: auto;
}

footer {
  break-inside: avoid;
}

#date {
  text-align: right;
}

#signature {
  height: 1in;
}

超文本:

<section>
  <header>
    <h1>The Letterhead</h1>
  </header>
  <article>
    <header>
      <p>
        {to: name}<br>
        {to: address}
      </p>
      <p id="date">{date}</p>
    </header>
    <div id="content">
      <p>Dear: {name}</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>    
    <footer>
      <p>Sincerely: {name}<p>
      <p id="signature"> </p>
      <p>
        {position} <br>
        {company} <br>
        {telephone} <br>
        {email} <br>
      </p>
    </footer>
  </article>
</section>

相关问题