Question

我提取了分布在页面上的几个块，通过CanvasRenderingContext2D.drawImage()将它们绘制到画布上，然后将画布导出为PDF / JPG。

现在，在绘制它们时，我还想整理它们的外观和/或删除/显示某些块的一部分，因为从静态的角度来看，样式不再有意义。

我可以在body上附加一个类，在body具有该类的情况下，样式块的样式有所不同，构建画布，将其导出为所选的内容类型，然后删除body类，但是这会使页面在1到2秒钟内显得古怪。（我想我可以用装载程序盖住页面）

我可以克隆块，对其进行不同样式设置或应用任何样式（内联或通过类）并从中绘制图像，但这并不是最佳选择。

关于如何正确执行此操作的任何想法？我倾向于进行类似仿真的工作。在原生@print下拥有整个“导出样式”，并在将这些块绘制到画布上之前进行仿真，而不会影响浏览器中呈现的内容，但是我不确定是否可行。

Answer 1

我知道这些方法不能回答您的特定问题，但是也许这些是解决问题的可行方法。

听起来您正在尝试使某些内容可打印。我认为这是由某种用户交互触发的，所以...

这意味着您有一些界面选项。例如，您可以通过在整个事物上放置一个模态来“隐藏”屏幕，并显示一条消息“仅处理片刻”。然后，正文（或其他元素）类解决方案起作用。

您可以按照建议复制元素。如果您选择这种方式，我会在更改副本时将副本移出屏幕。

 .element {
   position: fixed;
   left: -100vw;
 }

在不知道需要多少重复的情况下，很难推荐此选项。

或者，您可以将精力分配给service worker吗？这就需要将副本与DOM完全分离并在另一个线程中运行，但要复制到内存中。

这是一个非常有趣的问题！

Answer 2

我认为您可以使用node.cloneNode(true)对所有这些块进行深层克隆，将它们放在一个类名范围内的通用根目录中，该根目录远离用户的视线，然后您可以秘密地修改其样式。

由于您修改了节点的克隆版本，因此原始节点保持不变。另外，使用类名范围，您的CSS可以准确地将这些克隆作为目标。