Podgląd wydruku jest pusty Po dodaniu odwołania do zewnętrznego arkusza stylów w treści html do drukowania

Chcę wydrukować zawartość DIV strony. Robię to, pobierając zawartość elementu div za pomocą JS i przekazuję ją do nowego okna obiektu, na którym nazywam się .print(). Treści tekstowe i obrazy są wyświetlane jako takie. Tylko kiedy dodać tę linię do wyszukanych treści divPodgląd wydruku jest pusty Po dodaniu odwołania do zewnętrznego arkusza stylów w treści html do drukowania

<link href="myprintstyle.css" rel="stylesheet" type="text/css">

podgląd wydruku jest pusty. Próbowałem też dodać inne arkusze stylów, ten sam wynik. Jakiekolwiek odniesienie do arkusza stylów dodaję do wydruku treści HTML, ten sam wynik - strona podglądu blanku. tutaj jest Mój kod JS, aby wydrukować zawartość strony.

var printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">'); 
function Popup(htmldata) 
{ 
    var mywindow = window.open('test', 'eChallanReceipt', 'height=800,width=800,top=20;left=20'); 
    var str ="<html><head><title>test</title>"; 
    str+= "</head><body>"+ printDivCSS + htmldata+"</body></html>"; 
    mywindow.document.write(str); 
    mywindow.document.close(); // necessary for IE >= 10 
    mywindow.focus(); // necessary for IE >= 10 

    mywindow.print(); 
    mywindow.close(); 

    return false; 
}

Proszę zasugerować poprawkę. Chcę nadać styl zawartości do druku. Przeglądarka: Chrome

Ten sam kod działa w Mozilli. Ale w Chrome mam ten problem.

Źródło

2016-01-16 zee

Dlaczego znacznik jQuery? – j08691

CSS należy wywoływać z poziomu strony, a nie z ciała.

Źródło

2016-01-16 19:06:51 vandijkstef

Próbowałem też dodać css w głowie, nadal nie działa – zee

Trudno powiedzieć bez przykładu na żywo. Widzę, że problem dotyczy tylko przeglądarki Chrome. Czy możesz sprawdzić narzędzia programistyczne? (Prawy przycisk -> sprawdź). Będziesz zainteresowany kartą sieci (włącz dziennik zachowania) i zasobami (otwórz folder "ramki"), aby sprawdzić, czy arkusz stylów jest poprawnie załadowany. Zobacz także konsolę, sprawdź, czy są tam jakieś błędy. Dodatkowo możesz użyć karty elementów, aby zobaczyć, co dzieje się na danych HTML. Kolejna sugestia, dodaj "media =" wydrukuj "" w twoim linku css – vandijkstef

Wiem, że to stare pytanie, ale dla każdego, kto ma ten problem, oto jest rozwiązanie.

Pokazuje pustą stronę, ponieważ dokument nie został jeszcze załadowany. więc, aby to naprawić, dodaj mywindow.print() w timeout.

var printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">'); 
function Popup(htmldata) 
{ 
    var mywindow = window.open('test', 'eChallanReceipt', 'height=800,width=800,top=20;left=20'); 
    var str ="<html><head><title>test</title>"; 
    str+= "</head><body>"+ printDivCSS + htmldata+"</body></html>"; 
    mywindow.document.write(str); 
    mywindow.document.close(); // necessary for IE >= 10 
    $(mywindow.document).ready(function(){ 
    //set this timeout longer if you have many resources to load 
    setTimeout(function(){ 
     mywindow.focus(); 
     mywindow.print(); 
    },1000); 

    return false; 
}

Źródło

2016-11-09 07:14:49 Miqe

Strona jest pusta, ponieważ css nie zakończył ładowania –

, ale użyłem funkcji window.onload zamiast setTimeout ... ponieważ nie można tego rzetelnie powiedzieć jeśli css będzie mógł załadować w określonym czasie oczekiwania –

Czy nie ma lepszego sposobu? Limit czasu jest nieco zhakowany i jeśli ładowanie arkusza stylów trwa dłużej, zostanie przerwane i wydrukowane zostanie pusta strona – chasmani

Podgląd wydruku jest pusty Po dodaniu odwołania do zewnętrznego arkusza stylów w treści html do drukowania

Odpowiedz

Powiązane problemy