Печать и предварительный просмотр веб-страницы не работают должным образом в браузере Microsoft Edge
У меня странная проблема с веб-приложением. Обычно пользователь щелкает правой кнопкой мыши веб-страницу и выбирает «Печать». Он просматривает документ в режиме предварительного просмотра, а затем решает, как его распечатать.
В Хроме все работает нормально
В Microsoft Edge это работает, только если щелкнуть правой кнопкой мыши веб-страницу в верхней части страницы. Если вы прокрутите страницу вниз до того, как щелкнете правой кнопкой мыши и выберите «Печать», распечатанный документ будет отформатирован неправильно. Предварительный просмотр печати также отформатирован неправильно. См. снимки экрана ниже:
В Chrome – (щелкните правой кнопкой мыши внизу страницы)
Вы можете увидеть название приложения, название отчета, дату запуска отчета и т. д.
В MS Edge — (щелкните правой кнопкой мыши внизу страницы)
Предварительный просмотр начинается с некоторых случайных данных, как показано ниже. Название приложения, название отчета и т. д. не отображаются в предварительной и печатной версии.
Как видно из приведенных выше снимков экрана, Chrome отображается правильно. MS Edge отображается таким образом только в том случае, если я щелкаю правой кнопкой мыши веб-страницу в верхней части страницы, не прокручивая ее вниз.
Ниже приведен мой пример кода:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
<meta charset = "utf-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<title>Physician Activity Report</title>
<link rel = "stylesheet" href = "~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href = "~/lib/font-awesome/css/all.css" rel = "stylesheet" />
<link href = "~/css/mycss.css" rel = "stylesheet" media = "print" />
</head>
Ниже приведено содержимое mycss.css.
@media print {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666666666666%;
}
.col-md-10 {
width: 83.33333333333334%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666666666666%;
}
.col-md-7 {
width: 58.333333333333336%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666666666667%;
}
.col-md-4 {
width: 33.33333333333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.666666666666664%;
}
.col-md-1 {
width: 8.333333333333332%;
}
}
h5 {
color: darkblue;
}
Что я могу сделать, чтобы это правильно работало в MS Edge? Это проблема CSS?
Привет @TimR, версия Chrome имеет название приложения и заголовок отчета, как показано на снимке экрана, а версия MS Edge начинается с содержимого, как показано.
Возможно, Edge показывает текущую страницу, по которой щелкнули правой кнопкой мыши? Не взаимодействуя с ним сами, мы можем только строить догадки. Оба показывают, что он напечатает 19 страниц. Это все еще неправильно, когда все страницы распечатаны? Как насчет печати из верхнего меню или сочетания клавиш Ctrl+P (или комбинации горячих клавиш соответствующей платформы)?
Да, это все еще неправильно, когда все страницы печатаются @TimR
Привет @TimR, Ctrl+P работает, если я делаю это, находясь в верхней части веб-страницы. Если я прокрутлю вниз до кнопки веб-страницы, у меня возникнет та же проблема. По сути, печать работает, если вы находитесь в верхней части веб-страницы. Как только вы прокрутите вниз, он не работает. Во всех других браузерах у меня такой проблемы не возникает. Проблема сейчас в том, что большинство пользователей используют MS Edge, поэтому мне нужно это исправить.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это известная проблема в Edge версии 126. Исправление было включено в стабильную версию 126.0.2592.81, выпущенную 27 июня 2024 г. Установите последнюю версию Edge Stable 126.0.2592.81 (официальная сборка) и повторите тестирование.
Привет @Ю Чжоу, это работает. Спасибо
Я не понимаю, в чем проблема. Форматирование на обоих скриншотах одинаковое.