如何在我的 Vue.js 項目中以橫向模式打印 html 頁面

Question

我可以在橫向模式下打印 HTML 頁面，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,maximum-scale=1.0">
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<style type="text/css" media="screen"></style>

<style type="text/css" media="print">
/* @page {size:landscape}  */ 
@media print {
    @page {size: A4 landscape;}
}
</style>


<title>Landscape</title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>

<body>
<img src="https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201812022340">

</body>

</html>

但是我找不到如何在橫向模式下打印 Vue 組件頁面的方法。 我正在使用 Printd 組件在我的項目中打印頁面。 ( https://www.npmjs.com/package/printd ) 即使我設置了橫向模式，也總是設置縱向模式。

如何以編程方式設置橫向模式？

<template>
    <div ref="printMe">
        <img src="https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201812022340">
    </div>
</template>

<script>
import { Printd } from 'printd';

export default {
    mounted() {
        this.print();
    },
    methods: {      
        print() {
            const p = new Printd();
            p.print(
                this.$refs.printMe,
                `@media print {
                    @page {size: A4 landscape;}
                }`,
            );
        },
    },
};
</script>

<style scoped>
@media print {
    @page {
        size: landscape;
    }
}
</style>

Answer 1

您使用的媒體查詢被定義為始終表示整頁 - 這就是它的意圖。
您不能將頁面上的單個元素置於“橫向”模式，這僅適用於頁面。

因此，您必須手動將元素的尺寸更改為適合您需要的尺寸。 看下面的樣式

. orientation { width: 400px /* normal width */ } @media print { .orientation { width: 100% /* print width */ } }

如何在我的 Vue.js 項目中以橫向模式打印 html 頁面

問題描述

1 個解決方案

解決方案1
3 2020-01-03 07:05:48

如何在我的 Vue.js 項目中以橫向模式打印 html 頁面

問題描述

1 個解決方案

解決方案1 3 2020-01-03 07:05:48

解決方案1
3 2020-01-03 07:05:48