From 9e11adcf9aba686fffdb0e423fcaad2d4f7859df Mon Sep 17 00:00:00 2001 From: Antoine Prieels Date: Wed, 18 Sep 2019 11:50:29 +0000 Subject: [PATCH] [FIX] point_of_sale: Black receipts Some parts of the receipts had a black background, making them unreadable. The origin of this problem was that the white background was not applied correctly to the whole receipt. The rest of the receipt had a transparent background which was then changed to black when converting the receipt to an image. The parts of the receipt that had no background were the followings: - The parts that were out of the screen if the receipt was too long. We fix this by explicitly specifying a height when generating the canvas. - `html2canvas` applies the background to a rectangle starting from (0, 0) up to (width, height). In our case, `body` has a margin of 8px. Our receipt was then placed in a rectangle from (8, 8) to (width + 8, height + 8). closes odoo/odoo#37072 Signed-off-by: pimodoo --- addons/point_of_sale/static/src/css/pos_receipts.css | 2 ++ addons/point_of_sale/static/src/js/printers.js | 1 + 2 files changed, 3 insertions(+) diff --git a/addons/point_of_sale/static/src/css/pos_receipts.css b/addons/point_of_sale/static/src/css/pos_receipts.css index ad064c3d091..dbb94517ae6 100644 --- a/addons/point_of_sale/static/src/css/pos_receipts.css +++ b/addons/point_of_sale/static/src/css/pos_receipts.css @@ -1,4 +1,6 @@ .pos-receipt-print { + /*The receipt must be in the top left corner when rendered by html2canvas*/ + margin: -8px; width: 512px; text-align: left; direction: ltr; diff --git a/addons/point_of_sale/static/src/js/printers.js b/addons/point_of_sale/static/src/js/printers.js index 5e4ea3e3c83..1b322697285 100644 --- a/addons/point_of_sale/static/src/js/printers.js +++ b/addons/point_of_sale/static/src/js/printers.js @@ -51,6 +51,7 @@ var PrinterMixin = { var promise = new Promise(function (resolve, reject) { html2canvas($('.pos-receipt-print')[0], { background :'#FFFFFF', + height: $('.pos-receipt-print').outerHeight(), ignoreElements: function (node) { // By default, html2canvas copies the whole DOM even if we just capture a part // of it. When copying the list of products, it gets all of the product from the