使用浏览器“将页面另存为...”准备将打印机版本中的页面保存在本地（无服务器端脚本）

Posted 2023-05-07

【中文标题】使用浏览器“将页面另存为...”准备将打印机版本中的页面保存在本地（无服务器端脚本）

【英文标题】：Preparing a page in Printer Version to be saved locally with browser "save page as..." (no server-side scripting)

【发布时间】：2014-10-23 22:30:48

【问题描述】：

我正在使用 javascript 处理 html 页面（无服务器端脚本）网页。 这必须由用户动态修改。然后我想让用户在本地将此页面保存为 .html 文件。

为此，我建议用户使用浏览器功能“保存 页面为...”。

我这样做是因为我希望用户在离线时拥有对该文件的完全本地访问权限。

问题是，在我隐藏了所有他不需要的东西（菜单、说明等）之后，我希望用户将页面 保存在打印机版本中。 我已经链接了用于打印的 css 样式表（使用“media=print”），我想在用户保存页面之前使用它来更改页面的外观。 （不能使用 iFrame，因为浏览器功能“将页面另存为...”总是保存整个页面。）

请问有没有人知道动态链接一个新的 将css样式表添加到将替换css样式隐藏的页面 不需要的 CSS 类。

该解决方案必须适用于最新版本的浏览器，而不是旧版本。

【问题讨论】：

$('head').append('');

@artm - 是的，谢谢！它工作得很好！我附加了我的printer.css，这就是全部。我认为是一种非常简洁的方式来显示打印预览。但是你为什么不把它当作一个答案呢？

不是 100 % 确定它是否适合您，我现在将其添加为答案。

【参考方案1】：

您可以在需要时将带有打印规则的新样式表添加到文档中；

$('head').append('<link rel="stylesheet" href="printerFriedly.css" type="text/css" />');

【讨论】：

谢谢，这对我有用。如果有人想恢复页面，我只建议删除链接。如果您在链接中放置 id 之前会更容易： append('') 等等： $('#save_preview').remove();