粘贴到 MS Word 时如何设计网页以最小化格式损失答案

【问题标题】：How to design the web page for minimum format loss when pasting into MS Word粘贴到 MS Word 时如何设计网页以最小化格式损失
【发布时间】：2012-07-05 21:15:40
【问题描述】：

我正在开发一个 Web 应用程序，我希望用户能够复制页面的某些部分并将它们粘贴到 MS Word 中，同时尽量减少 html 格式的损失。例如，用户应该能够从页面中仅复制一个表格并将其粘贴到 word 中，损失最小（假设页面包含必要的均值，脚本仅选择单个表格或 div）。

我应该如何开发 html 以便用户可以以最小的损失复制粘贴？例如，我是否应该更喜欢 b、i 之类的标签而不是 css，我应该更喜欢内联 css 等。

【问题讨论】：

根据我的经验，这一切都归结为干净的语义代码以及您使用的 Office 版本。该页面仅适用于受控环境（即办公室间 Intranet）还是供全世界查看？
该应用程序将可供全世界使用。它不是一个受控环境，但我们可以忽略 2007 年以前的版本，而专注于 Office 2010 和 2007。

标签： html css ms-word

【解决方案1】：

只要不依赖外部 CSS 就可以了；内联 CSS 或诸如 B 之类的标签都可以解决问题。可能应该坚持 CSS2 - 没有 CSS3 的幻想。当然只使用网络安全字体，它们必须在客户端机器上可用。如果用户能够复制多个容器元素，您可能希望使用表格而不是 div 进行设计。坚持严格的布局，不要使用绝对定位的元素和类似的东西。力争采用适合 a4 页面的严格、方形和狭窄的布局。

【讨论】：

【解决方案2】：

如果您知道您的用户将粘贴什么，保存选项就是将该部分放在单独的页面中，以便于粘贴。

默认情况下，MS-Word 将提供相同的格式，但宽度始终是固定的，这可能会导致一些问题（太宽或太窄）。

要考虑的另一点是，从网站复制始终遵循 HTML 流，而不是它在浏览器中的显示方式。所以所有要粘贴的数据都需要在 HTML 中相邻。

注意：

绝对定位元素、叠加层等
使用 Ajax 编写脚本或动态加载的元素

脚本将始终被删除

要对其进行测试，只需将一些内容粘贴到 word 中，然后将 word 文件保存为 HTML。看看它的样子。

【讨论】：

感谢您的回答。您是否知道有关使用 javascript（尤其是本例中的 jquery）动态创建或修改元素的任何问题？有些元素是在复制之前创建或修改的，但据我所知，复制时的实际 html 应该按原样复制。
如果动态创建的所有 HTML 在文档流中并且不是绝对定位的，也将被复制。