طباعة المناظر الطبيعية من HTML

Question

لدي تقرير بتنسيق HTML، ويجب طباعته بشكل أفقي نظرًا لكثرة الأعمدة.هل هناك طريقة للقيام بذلك، دون أن يضطر المستخدم إلى تغيير إعدادات المستند؟

وما هي الخيارات بين المتصفحات.

Answer 1

في CSS الخاص بك، يمكنك تعيين خاصية @page كما هو موضح أدناه.

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

@الصفحة جزء من مواصفات CSS 2.1 ومع ذلك، هذا size ليس كما أبرزته إجابة السؤال هل @Page { size:landscape} قديم؟:

لم يعد CSS 2.1 يحدد سمة الحجم.تحدد مسودة العمل الحالية لوحدة الوسائط المشهورة CSS3 (ولكن هذا ليس قياسيًا أو مقبولًا).

كما هو مذكور، يأتي خيار الحجم من CSS 3 مسودة المواصفات.من الناحية النظرية، يمكن ضبطه على حجم الصفحة واتجاهها على الرغم من حذف الحجم في العينة الخاصة بي.

الدعم مختلط للغاية مع أ يبدأ تقديم تقرير الخطأ في فايرفوكس, ، معظم المتصفحات لا تدعمه.

قد يبدو أنه يعمل في 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 عند تحديد الطباعة ثم السماح للمستخدم بفتح ذلك وطباعته.

Answer 2

بلدي الحل:

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

هذا يعمل في IE, Firefox و Chrome

Answer 3

نقلا عن CSS-مناقشة ويكي

تم قطع قاعدة صفحة في نطاق من CSS2 إلى CSS2.1.وبحسب ما ورد تم تنفيذ قاعدة صفحة CSS2 الكاملة فقط في الأوبرا (وبشكل عريضة حتى ذلك الحين).يوضح الاختبار الخاص بي أن IE و Firefox لا يدعمان صفحة على الإطلاق.وفقًا للمواصفات CSS2 المواصفات الآن ، من الممكن تجاوز إعداد المستخدم للاتجاه (على سبيل المثال) ، فإن طباعة القوة في المناظر الطبيعية ولكن تم إسقاط خاصية "الحجم" ذات الصلة من CSS2.1 ، بما يتوافق مع الحقيقة أن أي متصفح حالي يدعمه.لقد أعيدت في وحدة الوسائط المليئة بـ CSS3 ولكن لاحظ أن هذه مسودة عمل فقط (كما في يوليو 2009).

خاتمة:ننسى صفحة الحاضر.إذا شعرت أن وثيقتك تحتاج إلى طباعة في اتجاه المناظر الطبيعية ، اسأل نفسك إذا كان بإمكانك بدلاً من ذلك جعل التصميم الخاص بك أكثر مرونة.إذا لم تتمكن حقًا من ذلك (ربما لأن المستند يحتوي على جداول بيانات بها العديد من الأعمدة ، على سبيل المثال) ، فستحتاج إلى تقديم المشورة للمستخدم لتعيين الاتجاه إلى المناظر الطبيعية وربما تحديد كيفية القيام بذلك في المتصفحات الأكثر شيوعًا.بالطبع ، تحتوي بعض المتصفحات على ميزة طباعة مناسبة (تتقلص إلى ملاءمة) (على سبيل المثالOpera ، Firefox ، IE7) ولكن من غير المستحسن الاعتماد على المستخدمين الذين لديهم هذا المرفق أو تشغيله.

Answer 4

حاول إضافة هذا CSS الخاص بك:

@page {
  size: landscape;
}

Answer 5

قد تتمكن من استخدام قاعدة CSS 2 @page والذي يسمح لك بضبط خاصية "الحجم" إلى المناظر الطبيعية.

Answer 6

ال size الملكية هي ما تبحث عنه كما ذكرنا.لتعيين اتجاه وحجم صفحتك عند الطباعة، يمكنك استخدام ما يلي:

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

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

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

وهنا رابط ل @وثائق الصفحة.

Answer 7

لا يكفي مجرد تدوير محتوى الصفحة.إليك ملف CSS الصحيح الذي يعمل في معظم المتصفحات (Chrome وFirefox وIE9+).

أول مجموعة الجسم margin إلى 0، وإلا ستكون هوامش الصفحة أكبر من تلك التي قمت بتعيينها في مربع حوار الطباعة.تعيين أيضا background اللون لتصور الصفحات.

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

margin, border و background مطلوبة لتصور الصفحات.

padding يجب ضبطها على هامش الطباعة المطلوب.في مربع حوار الطباعة، يجب عليك تعيين نفس الهوامش (10 ملم في هذا المثال).

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

حجم الصفحة A4 هو 210 مم × 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 ملم إلى الأسفل!

أيضًا، إذا كان لديك مزيجًا من الصفحات العمودية والأفقية، فسيقوم IE بتصغير الصفحات.نقوم بإصلاحه عن طريق الإعداد -ms-zoom إلى 1.665.إذا قمت بتعيينه على 1.6666 أو شيء من هذا القبيل، فقد يتم اقتصاص الحد الأيمن لمحتوى الصفحة في بعض الأحيان.

إذا كنت بحاجة إلى دعم IE8 أو المتصفحات القديمة الأخرى، يمكنك استخدامه -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3).ولكن بالنسبة للمتصفحات الحديثة بما فيه الكفاية، فهذا غير مطلوب.

Answer 8

يمكنك أيضًا استخدام سمة CSS غير القياسية لـ IE فقط وضع الكتابة

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

Answer 9

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

لا يعمل في Firefox 16.0.2 ولكنه يعمل في Chrome

Answer 10

لقد حاولت حل هذه المشكلة مرة واحدة، لكن كل أبحاثي قادتني نحو عناصر التحكم/المكونات الإضافية لـ ActiveX.لا توجد خدعة سمحت بها المتصفحات (قبل 3 سنوات على أي حال) لتغيير أي إعدادات طباعة (عدد النسخ، حجم الورق).

لقد بذلت جهودي لتحذير المستخدم بعناية من أنه بحاجة إلى تحديد "أفقي" عند ظهور مربع حوار الطباعة في المتصفح.لقد قمت أيضًا بإنشاء صفحة "معاينة الطباعة"، والتي عملت بشكل أفضل بكثير من IE6!يحتوي تطبيقنا على جداول بيانات واسعة جدًا في بعض التقارير، وقد أوضحت معاينة الطباعة للمستخدمين متى ينسكب الجدول من الحافة اليمنى للورقة (نظرًا لأن IE6 لم يتمكن من التعامل مع الطباعة على ورقتين أيضًا).

ونعم، لا يزال الناس يستخدمون IE6 حتى الآن.

Answer 11

<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 في النهاية.

ستتم طباعة هذا الجدول في الوضع الأفقي فقط وستتم طباعة كافة الصفحات الأخرى في الوضع الرأسي فقط.لكن المشكلة هي أنه إذا كان حجم الجدول أكبر من عرض الصفحة، فقد نفقد بعض الصفوف وأحيانًا نفقد الرؤوس أيضًا.احرص.

اتمنى لك يوم جيد.

شكرا لك ، نافين mettapally.

Answer 12

لقد قمت بإنشاء مستند 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.

Answer 13

هذا أيضا عملت بالنسبة لي:

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