Vue组件打印小妙招：优雅实现，样式不丢失

2024-03-14 12:35:03

如何优雅地打印Vue组件：一种使用SSR的方法

前言

在构建Web应用程序时，打印Vue组件是一项常见任务。然而，传统方法无法保留关联样式，导致打印输出外观不佳。本文将介绍一种利用Vue Server-Side Rendering（SSR）的优雅解决方案，使你能够打印组件，同时保留其精心设计的样式。

问题：直接打印的缺陷

直接使用JavaScript window.print() 方法打印Vue组件时，会忽略与之关联的样式表。原因在于，浏览器打印时只考虑DOM元素本身，而忽略了CSS。因此，打印输出将包含组件的原始HTML，却没有对应的样式，导致内容难以阅读和理解。

解决方案：Vue SSR的魔力

SSR通过在服务器端渲染Vue组件，并生成包含适当样式的HTML，解决了上述问题。

安装SSR工具包： 使用npm安装必要的Vue SSR工具包，包括 vue-server-renderer 和 @vue/server-html-template。
创建SSR服务器： 编写Node.js代码来创建SSR服务器，使用 renderToString 函数将Vue组件渲染为HTML。
修改Vue组件： 为需要打印的组件部分包裹一个<div>元素，并指定一个唯一的ID。
在服务器上渲染： 运行服务器并访问包含Vue组件的URL，触发SSR过程。
在浏览器中打印： 服务器会返回带有样式的HTML，然后可以在浏览器中使用 window.print() 打印。

实战示例

让我们通过一个示例来进一步理解：

<!-- Vue组件 -->
<template>
  <div id="print-content">
    <h1>打印我！</h1>
  </div>
</template>
<style>
  #print-content h1 {
    color: blue;
  }
</style>

// server.js
const { renderToString } = require('vue-server-renderer').createRenderer()

const app = new Vue({
  // 加载Vue组件
})

renderToString(app, (err, html) => {
  // 发送包含样式的HTML
})