vuetify.js - 打印 Vuetify 应用程序时如何保留列

Question

我有一个简单的 Vuetify 应用程序，看起来像这样（Codepen 链接）：

<div id="app">
  <v-app id="inspire">
    <v-container class="grey lighten-5">
      <v-row no-gutters>
        <v-col cols="8">
          <v-card class="pa-2" outlined tile>
            {{ this.$vuetify.breakpoint.name }}
          </v-card>
        </v-col>
        <v-col cols="4">
          <v-card class="pa-2" outlined tile>
            {{ this.$vuetify.breakpoint.name }}
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

在浏览器上查看以及打印页面时（从 Codepen 中的“调试模式”或在本地运行应用程序），它看起来与预期的一样：

但是，我想将xs列设置为12并仅将8/4比率保留为sm和向上（Codepen 链接）：

<div id="app">
  <v-app id="inspire">
    <v-container class="grey lighten-5">
      <v-row no-gutters>
        <v-col cols="12" sm="8">
          <v-card class="pa-2" outlined tile>
            {{ this.$vuetify.breakpoint.name }}
          </v-card>
        </v-col>
        <v-col cols="12" sm="4">
          <v-card class="pa-2" outlined tile>
            {{ this.$vuetify.breakpoint.name }}
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

在浏览器上查看时看起来符合预期，但当我打印它时它看起来不正确（从 Codepen 中的“调试模式”或在本地运行应用程序）：

为什么会发生这种情况，我该如何解决？

笔记

我知道打印时断点可能会改变。实际上，如果我使用 Puppeteer 打印页面：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(
    'http://localhost:8081/#/',
    { waitUntil: 'networkidle2' },
  );
  await page.emulateMediaType('print');
  await page.pdf({ path: 'output.pdf', format: 'A4', printBackground: true});
  await browser.close();
})();

我得到了预期的sm断点，但没有保留8/4比率。

标签： vuetify.js

Answer 1

正如@KaelWD（Vuetify 开发人员）所指出的，我在 GitHub 中打开了一个问题：

我认为这应该被视为浏览器的怪癖，如果您想要一致的打印布局，那么编写自己的样式表@media print而不是依赖 px 断点可能是个好主意。