window.print - грамотность печати в браузере

внешний интерфейс браузер Firefox Safari

адрес блогаJSON в 1993 году.GitHub.IO/2018/06/win…

github добро пожаловать начать следить

В последнее время возникла необходимость в печати страниц, воспользуйтесь этой возможностью, чтобы компенсировать относительно непопулярное знание печати в браузере. В этой статье рассматриваются только браузеры Chrome, Safari и Firefox.

интерфейс печати

Прежде всего, браузерная печать — это очень зрелое приложение~ По крайней мере, оно применяется уже давно, так что проблем с совместимостью не будет.

Самый простой способ печати — позвонить напрямуюwindow.print(), конечно сdocument.execCommand('print')Такого же эффекта можно добиться.

В настоящее время как в Safari, так и в Chrome открывается окно предварительного просмотра.FireFox не имеет предварительного просмотра, но позволяет напрямую выбрать принтер.В OSx вы можете предварительно просмотреть PDF-файл путем предварительного просмотра~

Как правило, этот метод вызова печати непосредственно на веб-странице не может удовлетворить потребности нашего бизнеса, например:

  • Отрегулируйте макет и размер шрифта, чтобы они соответствовали бумаге формата A4.
  • Используйте разные стили при печати
  • Используйте изображения с более высоким разрешением для печати
  • Что-то не относящееся к делу не появляется в печати бла-бла-бла

Так как же мы можем улучшить взаимодействие с пользователем при печати?

Использование таблицы стилей печати

Мы можем добавить media="print" к ссылке, чтобы указать, что это таблица стилей, которую будет применять принтер, например:

<link href="/example.css" media="print" rel="stylesheet" />

При такой печати таблица стилей будет применена к документу по умолчанию.

Используйте медиа-запросы

Совместимость: поддерживаются IE9+ и другие основные браузеры. Когда стилей для модификации не так много, то вообще не нужно переписывать таблицу стилей, достаточно написать медиа-запрос для достижения того же эффекта, например:

h1 {
  font-size: 14px;
}
@media print {
  h1 {
    font-size: 20px;
  }
}

прослушиватель событий

beforeprint && afterprint

Есть два события, которые могут прослушивать событие печати, одноbeforeprint,одинafterprintПечатное событие запускается до и после. Это событие было поддержано в IE6, но это не удивительно ~ В конце концов, IE поддерживает множество интерфейсных вызовов, прежде чем я сделал IE, чтобы открыть потребности Excel ~ Совместимость, вероятно, Firefox, полная поддержка IE, поддержка Chrome63 +, Safari не поддерживается, это половина половины.

window.addEventListener('beforeprint', ()=> {
  document.body.innerHTML = '正在打印...';
});
window.addEventListener('afterprint', ()=> {
  document.body.innerHTML = '打印完成...';
});

window.matchMedia тестовый интерфейс медиа-запроса

Если вы хотите быть совместимым с Safari, попробуйтеwindow.matchMediaСовместимость IE10+, другие популярные браузеры работают нормально.

Использование этого немного отличается, сначала создайте объект MediaQueryList, а затем прослушивайте изменения через него, например:

const printMedia = window.matchMedia('print');
function printChange({ matches, }) {
  document.body.innerHTML = matches? '正在打印...': '打印完成/取消';
}
printMedia.addListener(printChange);

Более персонализированная настройка области печати/содержимого печати

Если в проекте используется jq и т.д., или если вы хотите просто и грубо напечатать какую-то область, вам не нужно переписывать таблицу стилей или что-то в этом роде. Самый глупый способ - использовать плагин jq напрямую.jQuery.print

Вы также можете написать его самостоятельно, чтобы справиться с этим.Общая идея состоит в том, чтобы создать iframe, добавить dom и таблицу стилей для печати, а затем вызвать событие печати iframe. Напиши сюда простоdemo

function printPartial(dom, { title= document.title,}= {}) {
  if (!dom) return;
  let copyDom = document.createElement('span');
  const styleDom = document.querySelectorAll('style, link, meta');
  const titleDom = document.createElement('title');
  titleDom.innerText = title;

  copyDom.appendChild(titleDom);
  Array.from(styleDom).forEach(item=> {
    copyDom.appendChild(item.cloneNode(true));
  });
  copyDom.appendChild(dom.cloneNode(true));

  const htmlTemp = copyDom.innerHTML;
  copyDom = null;

  const iframeDom = document.createElement('iframe');
  const attrObj = {
    height: 0,
    width: 0,
    border: 0,
    wmode: 'Opaque'
  };
  const styleObj = {
    position: 'absolute',
    top: '-999px',
    left: '-999px',
  };
  Object.entries(attrObj).forEach(([key, value])=> iframeDom.setAttribute(key, value));
  Object.entries(styleObj).forEach(([key, value])=> iframeDom.style[key] = value);
  document.body.insertBefore(iframeDom, document.body.children[0]);
  const iframeWin = iframeDom.contentWindow;
  const iframeDocs = iframeWin.document;
  iframeDocs.write(`<!doctype html>`);
  iframeDocs.write(htmlTemp);
  iframeWin.focus();
  iframeWin.print();
  document.body.removeChild(iframeDom);
}

printPartial(document.querySelector('#description'));

Несколько последних замечаний

  • Печать напечатает все видимые элементы под документом, в том числе<header>внутри
  • Фон не будет напечатан, включая цвет фона, фоновое изображение и т. д.
  • Если изображение загружается лениво, требуется специальная обработка, иначе при печати оно будет пустым.

Ссылаться на:

blog.CSDN.net/Месяц фэн-шуй…

Mozilla print

Mozilla Using_a_print_style_sheet

Категории