制作可编辑/可打印的 HTML 发票

我一直很喜欢 FreshBooks 中编辑发票的方式，您只需点击并直接与看起来像发票的网页交互即可。我想到了，创建一个我自己的可编辑 HTML 发票可能是一个很酷的想法。当然，它无法做到 FreshBooks 几乎所有令人惊叹的功能，但对于一些有非常轻量级开票需求的人来说，它可能会有用。

查看演示   下载文件

一堆 <textarea>s

您只需在 HTML 中的开始和结束标签之间放置文本，即可预设 <textarea> 元素的值。因此，要在一个网页上制作可编辑元素，只需使用 <textarea> 元素即可。使用 <textarea> 元素还有其他好处。首先，它们是真正的表单元素，因此您理论上可以将它们包裹在表单标签中，在其中放置一个提交按钮，并编写一些 PHP 代码来处理它并使用它执行其他操作。其次，浏览器倾向于保存表单元素的值。因此，如果您不小心在编辑时刷新了页面，您所做的更改将会保留。

为什么要用 HTML 做这个，而不是用为此类用途而设计的普通桌面软件？

脑子里那个声音说得没错。首先，这只需要浏览器，不需要其他软件。如果您将它发布在您网站上的一个秘密位置，理论上您可以从世界上任何有互联网接入和打印机的电脑上访问它，并打印出一张发票。

如今将内容打印成 PDF 很容易，因此，虽然您可以打印它，但也可以选择保存为 PDF，这样您就拥有了一个可以用于电子邮件或存档等的真实文档。只是事后编辑起来有点困难。

干净的打印

如果您想获得此内容的完全干净打印，请查看 Firefox 中的这些打印选项。

基本上，关闭所有页眉/页脚内容，并打开背景颜色打印。

更新

Jon Neal 已更新了该版本，使其符合他的喜好。

您可以使用

-webkit-print-color-adjust: exact;

在 WebKit 浏览器中，强制例如黑色条形以屏幕上显示的方式打印，而不是变为白色并显示灰色字母。