文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Vue.js项目中以景观模式打印html页面？

问如何在Vue.js项目中以景观模式打印html页面？
EN

Stack Overflow用户

提问于 2020-01-03 05:20:41

回答 1查看 1.5K关注 0票数 0

我可以在景观模式下打印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>

html

vue.js

printing

vuejs2

javascript

回答 1

Stack Overflow用户

发布于 2020-01-03 07:05:48

--您使用的媒体查询定义为始终意味着整个页面--这就是它的意思。
不能将页面上的单个元素设置为“横向”模式，这只能用于页面。
因此，您必须手动将元素的维度更改为适合您需要的维度。见下面的样式

。取向{宽度:400 100 /*普通宽度*/ }@媒体打印{ .orientation {宽度: 100% /*打印宽度*/ }

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59573552

复制

相似问题

问如何在Vue.js项目中以景观模式打印html页面？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Vue.js项目中以景观模式打印html页面？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Vue.js项目中以景观模式打印html页面？
EN