可编辑/可打印发票,版本 2 Chris Coyier 于 2017 年 12 月 18 日 DigitalOcean 提供适用于您旅程各个阶段的云产品。 立即开始使用 $200 免费积分! 我知道,当我发布上一版可编辑发票时,使用一些 JavaScript 来美化它是一个好主意。 我当时想做个屏幕录制,但后来很多人站出来自己动手做了! 每个人都做得很好,但我最终发布的版本 2 是由 Vinh Pham 完成的。 新功能 自动插入今天的日期 一些额外的内容可以编辑,例如“发票”标题和“条款” 当您更改数量和金额时,会自动计算 添加和删除项目行 通过提供新徽标的 URL 路径来编辑徽标 文本区域的悬停颜色,指示可编辑性 打印样式表,以消除打印时不必要的额外功能位 查看演示 下载文件
你知道,你应该添加一个选项来将这个宝贝导出到 PDF ;)。
打印 > 另存为 PDF
在 Mac 上,您可以轻松地另存为 PDF,但在 Windows 中,打印对话框中没有此选项。
您可以安装一个假打印机,它会转换为 PDF,但有些人可能不知道怎么做,所以您可能应该添加它,它将非常有用。
如果您安装了 Adobe Reader,我认为它会成为默认选项。 我只是不觉得在使用大量奇特技术来重新发明轮子方面有很大的必要,因为使用为完成这项工作而构建的工具更容易,而且它们的适用范围更广。
正如 Alton Brown 所说:“不要使用单功能工具!”
感谢您和 Vinh Phan 的出色代码。
PS:我喜欢 Alton Brown! lol
Acrobat Pro 是在 Windows 上保存或打印到 PDF 所需的软件。 它不包含在 Reader 中。 正如评论者 Chris 所说,有一些替代的免费开源选项可以添加一个伪打印机来“打印到 PDF”。
有一些开源“导出到 PDF”库可以在页面上实现,例如 dompdf .
如果您使用 Firefox 作为您的 Web 浏览器(我相信还有其他浏览器),则内置了 PDF 打印功能。
喜欢它。 我会尽快开始使用它。 昨天我在 A List Apart 上读到一篇很棒的文章,文章介绍了如何使用 PDF 和 PHP 为客户提供选项,让他们使用“数字签名”来批准发票或报价。 您上面提到的发票系统是否可以在不增加太多麻烦的情况下使用这样的数字签名?
看起来很棒..
虽然在使用英镑时它不起作用.. :(
有没有类似的记账工具可以与英镑一起使用?
谢谢
嗨,Chris! 或者其他精通代码的人,
我想知道,是否有任何方法可以将此表单的默认货币更改为瑞典克朗? 我尝试修改了 php 代码,但它似乎无法识别语法。
干杯!
-Ot
您应该允许用户设置货币。 干得好
不错,可能要开始使用它了..
棒极了,棒极了,棒极了!
k.
英镑符号让它有点混乱 ;-)
下一步显然是 WordPress 主题,对吧?
我不知道为什么,但是拥有那个超级可编辑的界面,然后让值在失焦时而不是在更改时更新,再加上难看的“添加行”按钮,让它看起来“过时”。 尽管如此,我仍然喜欢这个理念。
嘿,Chris,我注意到 css-tricks 网站今天对我来说加载速度比平时慢。 似乎需要很长时间才能找到该网站。
仅供参考,它现在加载速度更快了。 我在 Twitter 上看到您昨天或今天启用了缓存。 它可能只是在构建缓存,但谁知道呢…现在一切都好了。 感谢您所有出色的工作以及与社区分享的慷慨。
感谢 Chris,它将非常有用。
我试图在计算中添加两个新元素,即我们魁北克省的两种税收。
在小计之后,我需要添加 TPS(小计 * 0.05)
在 TPS 之后,我需要添加 TVQ(小计 + TPS * 0.075),然后计算小计 + TPS + TVQ 以获得总计…
我从今天早上就开始处理这件事,但我无法弄清楚。
嗨!
如果您找到解决方案,请告诉我。 在意大利,我们也有两种税(4% 和 20%)。
谢谢,
-L.
如果您是 Windows 用户,无法打印为 PDF,请不要再犹豫了。 这里有一个名为 CuteWriter 的程序,它基本上可以让你选择将任何内容打印为 PDF。
您还需要安装一个名为 ghost script 的东西,但它会在安装后提示您并进行安装。
http://www.cutepdf.com/download/CuteWriter.exe
感谢 Chris! 这将节省我在升级 FreshBooks 帐户上的开支…目前为止。
这真的越来越棒了,甚至可以用起来了! ;)
使用起来和学习起来都很棒。 谢谢。
对我来说,我希望能够拖放排序项目行。 您将如何去做呢?
这真的太棒了,Chris(还有 Vinh)。 我要改进的一件事是,当您填写单价时,让它自动将“数量”更改为“1”。 在很多情况下,这可以节省一步操作。
但它是一个很棒的小型应用程序,也是一个很棒的想法。
很棒的东西。
我真的很想为自己采用这种方法。
谢谢。
奇怪…
尝试删除徽标,然后刷新页面…查看发票号。(它会用日期填充)
然后尝试删除徽标并更改发票号,然后刷新页面…查看客户姓名。(它会用发票号填充)
否则…非常酷。
看起来很棒..
虽然在使用英镑时它不起作用.. :(
有没有类似的记账工具可以与英镑一起使用?
谢谢
这简直太棒了! 比 Printlimiminator 还要好…Chris,您做得很棒!
这太棒了。 我们能否将其保存为不可编辑的 html(例如 00123.html)文件,以便我们可以将其发送给客户。
我认为您可以找到一些 php 脚本,可以轻松实现该功能。
-A
没有什么能阻止您在浏览器中保存它,只需转到文件 > 保存即可。 当然,如果您希望它们在您按下按钮时自动保存到服务器,您可以编写一些 PHP 代码来实现它。
这太棒了。感谢你写这篇文章,克里斯。
很棒的工作!
这太棒了!
不错,克里斯。
太棒了!
喜欢自从上次发布后做出的更改,克里斯!:)
这真是太棒了!省去了对软件的依赖。这意味着任何人都可以为我创建发票,留出更多时间工作;O) 意味着更多发票,太棒了!
但求求你了,我怎样才能让它支持英国的英镑?希望你能指引我正确的方向。
每次我来到这个网站,你总能提供解决方案!谢谢:o)
跟上面一样,我无法将代码转换为英镑…
嗨,伊恩,我的同事帮我改成了英镑。所以如果你想要一份副本,给我发邮件就可以了。:o) 欢呼,马克
PDF Creator 是免费的,可以在任何 Windows 应用程序中添加“打印到 PDF”选项。http://sourceforge.net/projects/pdfcreator/
我应该用它,也许这是除了我目前运行良好的竹子发票之外的另一个解决方案。
如果这个发票工具有记录交易历史的能力会更好;)
很棒的工作。这绝对是我的首选。
但我可以将发票导出为 .PDF 吗?
太棒了!我厌倦了使用 Quickbooks 模板…
有人可以解释一下如何更改货币吗?我在主文件中更改了所有“$”,并在 JS 中也更改了,但这并不能更改所有,而且会导致 NaN。
简单 + 可定制 + 实用 = 棒!
谢谢!
嗨,伙计们,我是一个新手程序员。我已经下载了这个可编辑发票,我正在尝试用它来做项目。我想获取 (添加和删除项目) 的 ID,以便执行 SQL 查询,有人知道怎么做吗?请帮帮我,谢谢。
嗨,伙计们,如果有人可以更改发票的货币,请告诉我。
我想将已支付金额的值更改为税 (增值税) 计算?我已经尝试了多种解决方案,但我无法使其正常工作。有人可以为我修改 example.js,以便用税计算替换已支付金额吗?
提前感谢。
里克尔特
如果你想使用英镑/英镑(£),请不要忘记使用 HTML 实体版本 £,而不是直接字符。
至于更改货币……打开 js 文件夹,打开 example.js 文件……在以 $(“#addrow”).click(function(){ 开头的函数中,查找类名为“cost”的文本区域,将美元符号更改为 £(英镑)和 €(欧元),然后保存更改……打开可编辑发票,点击添加行,你将看到新的货币符号……现在你可能需要找到其他需要更改的地方……注意不要更改变量……
我自己也有一個問題……我在 index.php 文件中添加了一個下拉框,允許用戶選擇不同的貨幣……克里斯·科伊爾,請問如何在選擇任何貨幣後更改發票上的貨幣值?……看看我的 HTML 下拉框
₦
€
£
$
¥
999
p.s. 最后一个 999 只是一个“控制”……