質問編集履歴

2

ブラウザに関する記述を追記しました

2017/05/30 03:07

投稿

k.t.est
k.t.est

スコア49

test CHANGED
File without changes
test CHANGED
@@ -125,3 +125,5 @@
125
125
  どのようにすればいいでしょうか?
126
126
 
127
127
  非常に特殊なケースかと思いますが、御教示頂ければ幸いです。
128
+
129
+ なお、使用しているブラウザはchromeです。

1

ご指摘を頂きまして、目指すものと現在のコードでどのようになってしまったのか記載致しました。またcssの記載を追記致しました。

2017/05/30 03:07

投稿

k.t.est
k.t.est

スコア49

test CHANGED
File without changes
test CHANGED
@@ -1,10 +1,18 @@
1
- シールを印刷できるラベルプリンタを用いて、ウェブで出力された画面を印刷したいのですが、このラベルプリンタにはオートカッターと呼ばれる機能があり、印刷物に決まった高さがなく、記入されている行数に応じて高さが決まり、自動で紙が切れます。
1
+ シールを印刷できるラベルプリンタ(http://www.brother.co.jp/product/labelprinter/ql1050/index.htm)を用いて、ウェブで出力された画面を印刷したいのですが、このラベルプリンタにはオートカッターと呼ばれる機能があり、印刷物に決まった高さがなく、記入されている行数に応じて高さが決まり、自動で紙が切れます。
2
2
 
3
3
  (スーパーのレシートのようなイメージです。幅(70mm)は固定されていて、高さが決まっていません。)
4
4
 
5
+
6
+
7
+ この機械を利用して、上下の余白が少なく、印刷されている部分が完了した時点でオートカッターで切れるようにしたいですのですが、印刷されている部分が完了しても余白が下の部分に多く残ってしまいます。
8
+
9
+ (最大高さ145mmとなっているのですが、例えば印刷のある部分の高さが50mmの場合、残りの95mmが白紙の状態で印刷されてしまいます。この95mmの部分は不要なので、切りたいです。)
10
+
11
+
12
+
5
13
  印刷用のcssで@page{size}で設定しようと、javascriptで
6
14
 
7
- 下記のようにしてみたのですが、うまく行きません。
15
+ 下記のようにしてみたのですが、うまく行きませんでした(ページ下部に白紙が多く残りました。)
8
16
 
9
17
  (なお、高さが幅より短くなる場合もあり得ます。)
10
18
 
@@ -12,17 +20,25 @@
12
20
 
13
21
  ```javascript
14
22
 
23
+ <script>
24
+
25
+ $(function(){
26
+
15
27
  var size = size + "mm";//sizeは任意の数値
16
28
 
17
29
  var size = "70mm " + size + " portrait";
18
30
 
19
31
  document.styleSheets[0].cssRules[0].cssRules[0].style["size"] = size;
20
32
 
33
+ });
34
+
35
+ </script>
36
+
21
37
  ```
22
38
 
23
39
 
24
40
 
25
- またhtmlで下記コードで、javascriptを用いて.printの高さを変えてみましたが、これもうまく行きませんでした。
41
+ またhtmlで下記コードで、javascriptを用いて.printの高さを変えてみましたが、これもうまく行きませんでした。(この場合も同様にページ下部に白紙が多く残りました。)
26
42
 
27
43
 
28
44
 
@@ -50,7 +66,61 @@
50
66
 
51
67
  $(".print").css("height",size);
52
68
 
69
+
70
+
53
71
  ```
72
+
73
+ ```css
74
+
75
+ @media print {
76
+
77
+ @charset "utf-8";
78
+
79
+
80
+
81
+ body{
82
+
83
+ margin:0px;
84
+
85
+ }
86
+
87
+
88
+
89
+ @page{
90
+
91
+ size:70mm 140mm portrait;
92
+
93
+ margin:0px;
94
+
95
+ }
96
+
97
+
98
+
99
+ .print{
100
+
101
+ width: 70mm;
102
+
103
+ height : 140mm;
104
+
105
+ page-break-after:always;
106
+
107
+ margin : 0px auto auto auto;
108
+
109
+ }
110
+
111
+
112
+
113
+ .print:last-child{
114
+
115
+ page-break-after:auto;
116
+
117
+ }
118
+
119
+ }
120
+
121
+ ```
122
+
123
+
54
124
 
55
125
  どのようにすればいいでしょうか?
56
126