Можно ли напечатать только элемент холста?

StackOverflow https://stackoverflow.com/questions/172365

  •  05-07-2019
  •  | 
  •  

Вопрос

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

Есть ли способ распечатать элемент холста или создать новое окно для рисования — единственный способ сделать это?

Обновлять:

Ответ был так прост.Я думал о гораздо более сложном решении.

Я бы хотел выбрать более 1 ответа.Мне не удалось распечатать холст, когда я использовал * для отключения отображения.Самым простым решением было просто отключить форму, которую я использовал для ввода, используя форму {display:none;} в CSS внутри @media print{}.Спасибо за быстрый ответ.



    @media print {
           form {
         display:none;
       }
    }
Это было полезно?

Решение

Вы можете попробовать что-то вроде этого:

@media print {
  * {
    display:none;
  }

  #SOME-CANVAS-ID {
    display:block;
  }
}

Я не уверен, что холст по умолчанию заблокирован, но вы можете попробовать что-то в этом роде и посмотреть, работает ли это.Идея состоит в том, что оно будет скрывать все (*) для печатных СМИ, за исключением некоторых других произвольных элементов, если приоритет правила выше (именно поэтому я использовал селектор идентификатора).

Редактировать:Если CSS3 (в частности, псевдокласс отрицания) имело больше поддержки, ваше правило могло бы быть таким простым:

*:not(canvas) {
  display:none;
}

Однако это может привести к скрытию тегов <html> и <body>, что также эффективно скроет и ваш холст...

Другие советы

Я не уверен на 100% в поддержке, но вы можете использовать CSS и поместить атрибут в <link> тег для media="print".В этом CSS-файле просто скройте элементы, которые вы не хотите показывать при печати: display:none;

Вы можете попробовать создать холст только для печати:

this.Print = function () {
    var printCanvas = $('#printCanvas');
    printCanvas.attr("width", mainCanvas.width);
    printCanvas.attr("height", mainCanvas.height);
    var printCanvasContext = printCanvas.get(0).getContext('2d');
    window.print();
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top