英文:
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 */}}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论