我如何在我的Vue.js项目中以横向模式打印HTML页面?

huangapple go评论67阅读模式
英文:

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.

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

&lt;style type=&quot;text/css&quot; media=&quot;screen&quot;&gt;&lt;/style&gt;

&lt;style type=&quot;text/css&quot; media=&quot;print&quot;&gt;
/* @page {size:landscape}  */ 
@media print {
    @page {size: A4 landscape;}
}
&lt;/style&gt;


&lt;title&gt;Landscape&lt;/title&gt;
&lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
&lt;meta name=&quot;keywords&quot; content=&quot;&quot;&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;img src=&quot;https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201812022340&quot;&gt;

&lt;/body&gt;

&lt;/html&gt;

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?

&lt;template&gt;
	&lt;div ref=&quot;printMe&quot;&gt;
		&lt;img src=&quot;https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201812022340&quot;&gt;
	&lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import { Printd } from &#39;printd&#39;;

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

&lt;style scoped&gt;
@media print {
	@page {
		size: landscape;
	}
}
&lt;/style&gt;

答案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 */
        }
      }
    

huangapple
  • 本文由 发表于 2020年1月3日 13:20:41
  • 转载请务必保留本文链接:https://go.coder-hub.com/59573552.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定