การพิมพ์แนวนอนจาก HTML

ฉันมีรายงาน HTML ซึ่งต้องพิมพ์แนวนอนเพราะมีคอลัมน์จำนวนมาก มีวิธีการทำเช่นนี้หรือไม่โดยที่ผู้ใช้ไม่ต้องเปลี่ยนการตั้งค่าเอกสาร?

และตัวเลือกในหมู่เบราว์เซอร์คืออะไร

ใน CSS ของคุณคุณสามารถตั้งค่าคุณสมบัติ @ page ตามที่แสดงด้านล่าง

@media print{@page {size: landscape}}

@ หน้านี้เป็นส่วนหนึ่งของข้อกำหนด CSS 2.1แต่นี่sizeไม่ใช่การเน้นตามคำตอบของคำถาม@Page {size: landscape} ล้าสมัยหรือไม่ :

CSS 2.1 ไม่ได้ระบุขนาดคุณลักษณะอีกต่อไป ร่างการทำงานปัจจุบันสำหรับโมดูล CSS3 Paged Media ไม่ระบุ (แต่นี่ไม่ใช่มาตรฐานหรือเป็นที่ยอมรับ)

ตามที่ระบุไว้ตัวเลือกขนาดมาจากCSS 3 ร่างข้อมูลจำเพาะ ในทางทฤษฎีมันสามารถตั้งค่าเป็นทั้งขนาดหน้าและการวางแนวแม้ว่าในตัวอย่างของฉันขนาดจะถูกละเว้น

การสนับสนุนมีการผสมกันมากกับรายงานข้อผิดพลาดเริ่มยื่นใน firefoxเบราว์เซอร์ส่วนใหญ่ไม่สนับสนุน

อาจดูเหมือนจะใช้งานได้ใน IE7 แต่เป็นเพราะ IE7 จะจดจำผู้ใช้ตัวเลือกล่าสุดของแนวนอนหรือแนวตั้งในตัวอย่างก่อนพิมพ์ (เฉพาะเบราว์เซอร์ที่เริ่มต้นใหม่)

บทความนี้มีข้อแนะนำบางประการเกี่ยวกับการใช้ JavaScript หรือ ActiveX ที่ส่งคีย์ไปยังเบราว์เซอร์ผู้ใช้แม้ว่าจะไม่เหมาะและพึ่งพาการเปลี่ยนการตั้งค่าความปลอดภัยของเบราว์เซอร์

คุณสามารถหมุนเนื้อหาแทนการวางแนวหน้ากระดาษ สิ่งนี้สามารถทำได้โดยการสร้างสไตล์และนำไปใช้กับร่างกายที่มีสองบรรทัดนี้ แต่ยังมีการวาดหลังการสร้างปัญหาการจัดตำแหน่งและรูปแบบจำนวนมาก

<style type="text/css" media="print">
    .page
    {
     -webkit-transform: rotate(-90deg); 
     -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
</style>

ทางเลือกสุดท้ายที่ฉันได้พบคือการสร้างเวอร์ชันในแนวนอนในรูปแบบ PDF คุณสามารถชี้ไปที่เมื่อผู้ใช้เลือกพิมพ์มันจะพิมพ์ PDF อย่างไรก็ตามฉันไม่สามารถรับงานพิมพ์อัตโนมัติใน IE7 ได้

<link media="print" rel="Alternate" href="print.pdf">

โดยสรุปในเบราว์เซอร์บางตัวมันเป็นสัมพัทธภาพง่ายโดยใช้ตัวเลือก @ ขนาดหน้า แต่ในหลาย ๆ เบราว์เซอร์ไม่มีวิธีที่แน่นอนและขึ้นอยู่กับเนื้อหาและสภาพแวดล้อมของคุณ นี่อาจเป็นเหตุผลที่ Google เอกสารสร้าง PDF เมื่อเลือกการพิมพ์จากนั้นอนุญาตให้ผู้ใช้เปิดและพิมพ์ได้

ทางออกของฉัน:

<style type="text/css" media="print">
    @page { 
        size: landscape;
    }
    body { 
        writing-mode: tb-rl;
    }
</style>

งานนี้ในIE, FirefoxและChrome

การหมุนเวียนเนื้อหาของหน้าเว็บไม่เพียงพอ นี่คือ CSS ที่ถูกต้องซึ่งใช้ได้กับเบราว์เซอร์ส่วนใหญ่ (Chrome, Firefox, IE9 +)

ขั้นแรกให้ตั้งค่าเนื้อหาmarginเป็น 0 เพราะไม่เช่นนั้นระยะขอบกระดาษจะใหญ่กว่าที่คุณตั้งไว้ในกล่องโต้ตอบ ตั้งค่าbackgroundสีเพื่อให้เห็นภาพหน้ากระดาษด้วย

body {
  margin: 0;
  background: #CCCCCC;
}

margin, borderและbackgroundจะต้องเห็นภาพหน้า

paddingจะต้องตั้งค่าไว้ที่ระยะขอบการพิมพ์ที่ต้องการ ในกล่องโต้ตอบการพิมพ์คุณต้องตั้งค่าระยะขอบเดียวกัน (10mm ในตัวอย่างนี้)

div.portrait, div.landscape {
  margin: 10px auto;
  padding: 10mm;
  border: solid 1px black;
  overflow: hidden;
  page-break-after: always;
  background: white;
}

ขนาดของหน้า A4 คือ 210 มม. x 297 มม. คุณต้องลบระยะขอบการพิมพ์ออกจากขนาด และกำหนดขนาดของเนื้อหาของหน้า:

div.portrait {
  width: 190mm;
  height: 276mm;
}
div.landscape {
  width: 276mm;
  height: 190mm;
}

ฉันใช้ 276 มม. แทนที่จะเป็น 277 มม. เพราะเบราว์เซอร์ที่แตกต่างกันปรับขนาดหน้าเว็บให้แตกต่างกันเล็กน้อย ดังนั้นบางคนจะพิมพ์เนื้อหาความสูง 277 มม. ในสองหน้า หน้าสองจะว่างเปล่า ปลอดภัยกว่าที่จะใช้ 276 มม.

เราไม่จำเป็นต้องใด ๆmargin, border, padding, backgroundบนหน้าพิมพ์เพื่อลบออก:

@media print {
  body {
    background: none;
    -ms-zoom: 1.665;
  }
  div.portrait, div.landscape {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
  div.landscape {
    transform: rotate(270deg) translate(-276mm, 0);
    transform-origin: 0 0;
  }
}

โปรดทราบว่าที่มาของการเปลี่ยนแปลงคือ0 0! นอกจากนี้เนื้อหาของหน้าแนวนอนจะต้องเลื่อนลง 276 มม.!

นอกจากนี้หากคุณมีการผสมผสานระหว่างแนวตั้งและหน้า lanscape IE จะย่อหน้า เราแก้ไขได้โดยตั้งค่า-ms-zoomเป็น 1.665 หากคุณตั้งค่าเป็น 1.6666 หรือบางสิ่งเช่นนี้ขอบด้านขวาของเนื้อหาหน้าอาจถูกครอบตัดในบางครั้ง

หากคุณจำเป็นต้อง IE8- หรือเบราว์เซอร์เก่าอื่น ๆ ที่สนับสนุนคุณสามารถใช้-webkit-transform, ,-moz-transform filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)แต่สำหรับเบราว์เซอร์ที่ทันสมัยพอไม่จำเป็นต้องใช้

นี่คือหน้าทดสอบ:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      ...Copy all styles here...
    </style>
  </head>
  <body>
    <div class="portrait">A portrait page</div>
    <div class="landscape">A landscape page</div>
  </body>
</html>

อ้างถึงจากCSS-Discuss Wiki

กฎ @page ถูกลดขนาดลงในขอบเขตจาก CSS2 ถึง CSS2.1 มีรายงานว่ามีการใช้กฎ CSS2 @page แบบเต็มเฉพาะใน Opera เท่านั้น การทดสอบของฉันเองแสดงว่า IE และ Firefox ไม่รองรับ @page เลย ตามข้อมูลจำเพาะ CSS2 ตอนนี้ล้าสมัย 13.2.2 เป็นไปได้ที่จะแทนที่การตั้งค่าของผู้ใช้และ (เช่น) บังคับให้พิมพ์ในแนวนอน แต่คุณสมบัติ "ขนาด" ที่เกี่ยวข้องได้ลดลงจาก CSS2.1 สอดคล้องกับความจริง ไม่มีเบราว์เซอร์ปัจจุบันที่รองรับ มันได้รับการคืนสถานะในโมดูล CSS3 Paged Media แต่โปรดทราบว่านี่เป็นเพียงร่างการทำงาน (ณ เดือนกรกฎาคม 2009)

สรุป: ลืมเกี่ยวกับ @ page สำหรับปัจจุบัน หากคุณรู้สึกว่าเอกสารของคุณจำเป็นต้องพิมพ์ในแนวนอนให้ถามตัวเองว่าคุณสามารถทำให้การออกแบบของคุณลื่นไหลมากขึ้นหรือไม่ หากคุณทำไม่ได้จริง ๆ (อาจเป็นเพราะเอกสารมีตารางข้อมูลที่มีคอลัมน์จำนวนมาก) คุณจะต้องแนะนำผู้ใช้ให้ตั้งค่าการวางแนวเป็นแนวนอนและอาจร่างวิธีทำในเบราว์เซอร์ทั่วไป แน่นอนว่าเบราว์เซอร์บางตัวมีคุณสมบัติพิมพ์ให้พอดี (ลดขนาดให้พอดี) (เช่น Opera, Firefox, IE7) แต่ไม่สามารถพึ่งพาผู้ใช้ที่มีสถานที่นี้หรือเปิดเครื่อง

ลองเพิ่ม CSS ของคุณ:

@page {
  size: landscape;
}

sizeคุณสมบัติคือสิ่งที่คุณหลังจากเป็นที่กล่าวถึง ในการตั้งค่าการวางแนวและขนาดของหน้าเมื่อพิมพ์คุณสามารถใช้สิ่งต่อไปนี้:

/* ISO Paper Size */
@page {
  size: A4 landscape;
}

/* Size in mm */    
@page {
  size: 100mm 200mm landscape;
}

/* Size in inches */    
@page {
  size: 4in 6in landscape;
}

นี่คือลิงค์ไปยังเอกสาร @หน้า

คุณอาจจะสามารถที่จะใช้กฎ @page CSS 2ซึ่งจะช่วยให้คุณสามารถตั้งค่าคุณสมบัติ 'ขนาด' เพื่อภูมิทัศน์

คุณยังสามารถใช้โหมดการเขียนแอ็ตทริบิวต์ css ที่ไม่ใช่มาตรฐาน IE เท่านั้น

div.page    { 
   writing-mode: tb-rl;
}

-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

ไม่ทำงานใน Firefox 16.0.2 แต่ใช้งานได้ใน Chrome

ฉันสร้างเอกสาร MS เปล่าด้วยการตั้งค่าแนวนอนแล้วเปิดในแผ่นจดบันทึก คัดลอกและวางต่อไปนี้ในหน้า html ของฉัน

<style type="text/css" media="print">
   @page Section1
    {size:11 8.5in;
    margin:.5in 13.6pt 0in 13.6pt;
    mso-header-margin:.5in;
    mso-footer-margin:.5in;
    mso-paper-source:4;}
div.Section1
    {page:Section1;}
</style>



<div class="Section1"> put  text / images / other stuff  </div>

ตัวอย่างก่อนพิมพ์แสดงหน้าในขนาดแนวนอน ดูเหมือนว่าจะทำงานได้ดีบน IE และ Chrome ไม่ใช่ทดสอบบน FF

ฉันพยายามที่จะแก้ปัญหานี้เพียงครั้งเดียว แต่งานวิจัยทั้งหมดของฉันนำฉันไปสู่การควบคุม ActiveX / ปลั๊กอิน ไม่มีเคล็ดลับที่เบราว์เซอร์ (3 ปีที่แล้ว) อนุญาตให้เปลี่ยนการตั้งค่าการพิมพ์ใด ๆ (จำนวนสำเนาขนาดกระดาษ)

ฉันพยายามเตือนผู้ใช้อย่างรอบคอบว่าพวกเขาจำเป็นต้องเลือก "แนวนอน" เมื่อกล่องโต้ตอบการพิมพ์ของเบราว์เซอร์ปรากฏขึ้น ฉันยังสร้างหน้า "ตัวอย่างก่อนพิมพ์" ซึ่งทำงานได้ดีกว่า IE6 มากเช่นกัน! แอปพลิเคชันของเรามีตารางข้อมูลที่กว้างมากในบางรายงานและตัวอย่างก่อนพิมพ์ทำให้ชัดเจนต่อผู้ใช้เมื่อตารางจะแยกออกจากขอบด้านขวาของกระดาษ (เนื่องจาก IE6 ไม่สามารถรับมือกับการพิมพ์บนกระดาษ 2 แผ่น)

และใช่คนยังคงใช้ IE6 แม้กระทั่งตอนนี้

<style type="text/css" media="print">
.landscape { 
    width: 100%; 
    height: 100%; 
    margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1); 
} 
</style>

หากคุณต้องการนำสไตล์นี้ไปใช้กับตารางให้สร้างแท็ก div หนึ่งแท็กด้วยคลาสสไตล์นี้และเพิ่มแท็กตารางภายในแท็ก div นี้และปิดแท็ก div ที่ท้าย

ตารางนี้จะพิมพ์ในแนวนอนเท่านั้นและหน้าอื่น ๆ ทั้งหมดจะพิมพ์ในโหมดแนวตั้งเท่านั้น แต่ปัญหาคือถ้าขนาดของตารางมีมากกว่าความกว้างของหน้าเราอาจจะหลวมแถวและบางครั้งก็พลาดส่วนหัวด้วย ระวัง.

ขอให้มีความสุขในวันนี้

ขอบคุณ Naveen Mettapally

ฉันลองคำตอบของ Denis และพบปัญหา (หน้าภาพบุคคลไม่ได้พิมพ์อย่างถูกต้องหลังจากไปยังหน้าแนวนอน) ดังนั้นนี่คือวิธีแก้ปัญหาของฉัน:

body {
  margin: 0;
  background: #CCCCCC;
}

div.page {
  margin: 10px auto;
  border: solid 1px black;
  display: block;
  page-break-after: always;
  width: 209mm;
  height: 296mm;
  overflow: hidden;
  background: white;
}

div.landscape-parent {
  width: 296mm;
  height: 209mm;
}

div.landscape {
  width: 296mm;
  height: 209mm;
}

div.content {
  padding: 10mm;
}

body,
div,
td {
  font-size: 13px;
  font-family: Verdana;
}

@media print {
  body {
    background: none;
  }
  div.page {
    width: 209mm;
    height: 296mm;
  }
  div.landscape {
    transform: rotate(270deg) translate(-296mm, 0);
    transform-origin: 0 0;
  }
  div.portrait,
  div.landscape,
  div.page {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
}

<div class="page">
  <div class="content">
    First page in Portrait mode
  </div>
</div>
<div class="page landscape-parent">
  <div class="landscape">
    <div class="content">
      Second page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
    </div>
  </div>
</div>
<div class="page">
  <div class="content">
    Third page in Portrait mode
  </div>
</div>

สิ่งนี้ใช้ได้กับฉันด้วย:

@media print and (orientation:landscape) { … }

หากคุณต้องการเห็นแนวนอนบนหน้าจอก่อนพิมพ์รวมถึงการพิมพ์จากนั้นใน css ของคุณคุณสามารถตั้งค่าความกว้างเป็น 900px และความสูงเป็น 612px

OP ไม่ได้พูดถึงขนาด A4 ฉันถือว่าขนาดตัวอักษรเป็นตัวเลขของฉันด้านบน

คุณสามารถลองต่อไปนี้:

@page {
    size: auto
}