teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

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

2017/05/30 03:07

投稿

k.t.est
k.t.est

スコア49

title CHANGED
File without changes
body CHANGED
@@ -61,4 +61,5 @@
61
61
  ```
62
62
 
63
63
  どのようにすればいいでしょうか?
64
- 非常に特殊なケースかと思いますが、御教示頂ければ幸いです。
64
+ 非常に特殊なケースかと思いますが、御教示頂ければ幸いです。
65
+ なお、使用しているブラウザはchromeです。

1

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

2017/05/30 03:07

投稿

k.t.est
k.t.est

スコア49

title CHANGED
File without changes
body CHANGED
@@ -1,16 +1,24 @@
1
- シールを印刷できるラベルプリンタを用いて、ウェブで出力された画面を印刷したいのですが、このラベルプリンタにはオートカッターと呼ばれる機能があり、印刷物に決まった高さがなく、記入されている行数に応じて高さが決まり、自動で紙が切れます。
1
+ シールを印刷できるラベルプリンタ(http://www.brother.co.jp/product/labelprinter/ql1050/index.htm)を用いて、ウェブで出力された画面を印刷したいのですが、このラベルプリンタにはオートカッターと呼ばれる機能があり、印刷物に決まった高さがなく、記入されている行数に応じて高さが決まり、自動で紙が切れます。
2
2
  (スーパーのレシートのようなイメージです。幅(70mm)は固定されていて、高さが決まっていません。)
3
+
4
+ この機械を利用して、上下の余白が少なく、印刷されている部分が完了した時点でオートカッターで切れるようにしたいですのですが、印刷されている部分が完了しても余白が下の部分に多く残ってしまいます。
5
+ (最大高さ145mmとなっているのですが、例えば印刷のある部分の高さが50mmの場合、残りの95mmが白紙の状態で印刷されてしまいます。この95mmの部分は不要なので、切りたいです。)
6
+
3
7
  印刷用のcssで@page{size}で設定しようと、javascriptで
4
- 下記のようにしてみたのですが、うまく行きません。
8
+ 下記のようにしてみたのですが、うまく行きませんでした(ページ下部に白紙が多く残りました。)
5
9
  (なお、高さが幅より短くなる場合もあり得ます。)
6
10
 
7
11
  ```javascript
12
+ <script>
13
+ $(function(){
8
14
  var size = size + "mm";//sizeは任意の数値
9
15
  var size = "70mm " + size + " portrait";
10
16
  document.styleSheets[0].cssRules[0].cssRules[0].style["size"] = size;
17
+ });
18
+ </script>
11
19
  ```
12
20
 
13
- またhtmlで下記コードで、javascriptを用いて.printの高さを変えてみましたが、これもうまく行きませんでした。
21
+ またhtmlで下記コードで、javascriptを用いて.printの高さを変えてみましたが、これもうまく行きませんでした。(この場合も同様にページ下部に白紙が多く残りました。)
14
22
 
15
23
  ```html
16
24
  <body>
@@ -24,6 +32,33 @@
24
32
  ```javascript
25
33
  var size = size + "mm";//sizeは任意の数値
26
34
  $(".print").css("height",size);
35
+
27
36
  ```
37
+ ```css
38
+ @media print {
39
+ @charset "utf-8";
40
+
41
+ body{
42
+ margin:0px;
43
+ }
44
+
45
+ @page{
46
+ size:70mm 140mm portrait;
47
+ margin:0px;
48
+ }
49
+
50
+ .print{
51
+ width: 70mm;
52
+ height : 140mm;
53
+ page-break-after:always;
54
+ margin : 0px auto auto auto;
55
+ }
56
+
57
+ .print:last-child{
58
+ page-break-after:auto;
59
+ }
60
+ }
61
+ ```
62
+
28
63
  どのようにすればいいでしょうか?
29
64
  非常に特殊なケースかと思いますが、御教示頂ければ幸いです。