javascript - 谷歌日历打印如何工作？

Question

我正在使用 Jquery 在 ASP.NET 中构建日历，并且正在尝试实现打印。我可以毫无问题地打印简单的 html 或图像。但我不知道如何构建像谷歌日历打印这样的打印。

当您在“日历打印预览”中按打印时，弹出的打印对话框有更多选项（跨浏览器），此打印对话框与简单的浏览器打印有些不同，并且它们似乎具有更多控制权，例如设置横向打印.

任何人都知道如何实现这一点？

谢谢

Answer 1

它只是一个弹出窗口，其中包含一些选项，这些选项发布到生成 .pdf 文档的服务器端脚本。

你可以使用

<link media="print" rel="stylesheet" type="text/css" href="main.css" />

在不使用生成图像/pdf的服务器端脚本的情况下做类似的事情。

注意media="print"，这意味着在打印页面时将使用给定的样式表。您可以在那里指定自定义 css 规则（如隐藏导航、使日历在纸上看起来不错等）。

编辑：

回应评论。如果您将 html 转换为 pdf，它将看起来完全一样。当您在谷歌日历中提交该表单时，他们会采用所有这些选项并从中生成 pdf。如果您选择横向，他们将旋转页面并重新计算所有内容以使其适合页面。为了为您简化它，他们根据您提交的选项在服务器端绘制图像并将其放入 pdf 中。

如果你以前没有做过，这并不是那么简单。我会在那个打印页面上玩css和JavaScript，看看我是否可以通过使用JS和css规则在横向和纵向之间切换来模仿类似的东西（当用户点击它们时，制作2个按钮 - “横向”，“纵向”您更改日历的 css 规则，使其适合给定的纸张大小）。同样，如果您不熟悉 css，那将很难。

没有确定的答案，google 走的路很不错，但复现没那么简单。

更多信息在评论中。