0
Thumbs Up
Thumbs Down

Solving printing issue (with css styling) in Chrome and Firefox with Javascript

TEKNOSAINS
TEKNOSAINS - Thu, 21 Dec 2017 11:12
Dilihat: 781

I was having an serious issue with printing (with css styling) in Chrome and Firefox. I need to have the Styling also printed/applied in printing Preview and the print result. I've tried some workrounds sugessted like adding -webkit-print-color-adjust: exact!important; etc, but still it didnt work in my case

Until i figured out that the Style need to have !important attribute. When working with WYSWYG Editor, you generally would have inline-styles css applied to the element and this could be a problem for printing. So I need to add !important to every css style attribute found in every element.

Here's how I solved it using jQuery

//add !important rule to every style found in each element//so the browser print render the color/style alsovar el = $('.content *');if (el.length) { el.each(function(item) { var _this = $(this); var attr = _this.attr('style'); var style = ''; if (typeof attr !== typeof undefined && attr !== false) { if (attr.split(';').length) { attr.split(';').forEach(function(item) { if (item.trim() != '') { style += item.trim() + '!important;-webkit-print-color-adjust: exact!important;'; } }); _this.attr('style', style); } } });}

Here's the result in Printing Preview before and After adding the Code Hack


Sumber: TEKNOSAINS

Solving printing issue (with css styling) in Chrome and Firefox with Javascript

Solving printing issue (with css styling) in Chrome and Firefox with Javascript

Solving printing issue (with css styling) in Chrome and Firefox with Javascript

Solving printing issue (with css styling) in Chrome and Firefox with Javascript

Solving printing issue (with css styling) in Chrome and Firefox with Javascript

  
PARTNER KAMI
JPNN
Republika Online
LIPUTAN6
okezone
BBC
bintang
bola
Antvklik
rumah123
Rumah
Love Indonesia
CENTROONE
wartaekonomi
Voice of America
Popular
Gocekan
Teqnoforia
Angelsontrip
Makanyuks
telsetNews
BisnisWisata
Jakarta Kita
Indonesia Raya News
RajaMobil
Mobil123
Otospirit
MakeMac
Indotelko
Inditourist
TEKNOSAINS
MotorExpertz
Mobil WOW
Oto
Kpop Chart
salamkorea
slidegossip
Hotabis
INFOJAMBI
Japanese STATION
SeleBuzz
Cintamobil
Football5star
Citra Indonesia
OTORAI
Sehatly
Hetanews
Inikata
Nusabali
Garduoto
Beritakalimantan
batampos
covesia
carmudi
idnation
inipasti
teknorush
winnetnews
mediaapakabar
carvaganza
mediakepri
kabarsurabaya