英文:
How can I print html page in Landscape mode in my Vue.js project
问题
我可以在横向模式下打印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>
英文:
I can print HTML page in Landscape mode like below.
<!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>
But I can't find the way how to print a Vue component page in landscape mode. I'm using Printd component to print page in my project. (https://www.npmjs.com/package/printd)
Even though I set landscape mode, always be set portrait mode.
How can I set landscape mode programmatically?
<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>
答案1
得分: 3
- 你使用的媒体查询被定义为始终表示整个页面 - 这是它的预期行为。
- 你不能将页面上的单个元素放入“横向”模式，这仅适用于页面。
- 因此，你需要手动更改元素的尺寸，使其适应你的需求。请参考下面的样式：
.orientation {
width: 400px; /* 正常宽度 */
}
@media print {
.orientation {
width: 100%; /* 打印宽度 */
}
}
英文:
-
The media query you use is defined to always mean the full page -
that’s what its meant to do. -
You can’t put individual elements on a page into “landscape” mode, that’s only
possible for pages. -
So you will have to change the dimensions of the element manually to those that
fit your needs. See the below style. orientation { width: 400px /* normal width */ } @media print { .orientation { width: 100% /* print width */ } }
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论