2014-10-07 3 views
0

У меня проблема. Я пытаюсь распечатать только контент, который находится в div, в основном все под кнопками (см. Рисунок ниже). Div contentПечатать часть страницы javascript

Но я пытаюсь напечатать, результат выглядит примерно так: preing preview

И.Э. без каких-либо таблиц стилей.

Но код включает в себя все файлы css, которые у меня есть.

Это функция, которая у меня есть. Я пробовал с таблицами стилей или без них и разными способами ссылаться на них. Кто-нибудь может понять, что я делаю неправильно?

function PrintHistory() { 
     var printDivCSS5 = new String(
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.core.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.resizable.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.selectable.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.accordion.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.autocomplete.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.button.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.dialog.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.slider.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.tabs.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.datepicker.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.progressbar.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.theme.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jqGrid.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jqgrid-smoothness-ui.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/datepicker.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/ui.fancytree.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/site.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/bootstrap.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/Hepper.mms.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/bootstrap-select.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/typeahead.css">'); 

     var oldPage = document.body.innerHTML; 
     var prtContent = document.getElementById("historyTabeTarget"); 
     var WinPrint = window.open('', '', 'letf=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status=0'); 
     WinPrint.document.write("<html><head><title></title></head><body>" + printDivCSS5 + prtContent.innerHTML + "</body>"); 
     WinPrint.document.close(); 
     WinPrint.focus(); 
     WinPrint.print(); 
     WinPrint.close(); 
     prtContent.innerHTML = oldPage; 
    }; 
+2

Что вы ожидаете увидеть? Синий фон за заголовком и серый фон за содержанием? Если это так, вы, вероятно, не делаете ничего плохого, поскольку браузеры, как правило, отключают цвета фона и изображения при печати (чтобы сохранить чернила, которые, как мне кажется). –

+0

Вы слышали о [CSS Print Media] (https://developer.mozilla.org/en-US/docs/Web/CSS/@media)? – epascarello

ответ

1

Я считаю, что это может быть достигнуто с помощью CSS. Все, что вам нужно сделать, это добавить следующие спецификации CSS для печати в таблицу стилей.

@media print{ 
    /* your print css */ 
} 

Использование display: none; для всех элементов, которые вы не хотите быть распечатаны и переопределить остальные CSS соответственно.

Смежные вопросы