Print preview is failing on Chrome version Version 98.0.4758.102 (Official Build) (64-bit) [Latest]

Nico Freeman 11

So, I have an issue where I need to check why we can't open PDF files using google chrome, I tried Brave, IE, Edge, Firefox on latest updates and is working perfectly, but after the latest update as of today we cannot view the preview, the button print is available but then we cant print.

Also tried Chrome Beta (Version 99.0.4844.51 (Official Build) beta (64-bit)) And Canary (Version 101.0.4919.0 (Official Build) canary (64-bit)) and they have the same issue.

This is a aspx, which the code behind we get the pdf as EncodeString64 we then convert it Convert.FromBase64String(pdfContent) (We get the bytes) we send the response (HttpResponse) with Buffer and BufferOutput to False the ContentType = application/pdf and we add 2 headers, the "content-length" and "content-disposition", "inline; filename=" & nameOfFile & ".pdf",
CacheControl = "no-cache", Expires = -1, and Response.BinaryWrite(pdfContentInBytes) and finally Response.Flush()

I don't know if anyone have encountered the same issue after this new chrome update.

Technologies: .Net Framework 4.7.2

Zied Hamdi 0 Reputation points

2023-06-30T10:40:05.02+00:00

I have that on my app, and I can't guess how to fix it: just trying to print this page https://test.cvlink.in/cv/648d954d6f17c3b3aba3c635 the first time it displayed the print preview correctly, but when I unchecked the 'print header and footer' and checked the 'include background graphics' it stopped responding, then on retries, it systematically shows this 'print preview failed' screen

Zied Hamdi 0

I was able to reproduce the error programatically at this link:
https://try.playwright.tech/?e=generate-pdf

This works, but as soon as I add the option printBackground:true as mentioned in the documentation, the printing fails

// @ts-check
const playwright = require('playwright');

(async () => {
  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://test.cvlink.in/cv/648d954d6f17c3b3aba3c635');
  		await new Promise(resolve => {
			setTimeout(resolve, 2000);
		});
  await page.pdf({ 
    path: `document.pdf`,
    printBackground: true, //commenting this stops the error from happening
    preferCSSPageSize: true, displayHeaderFooter:false });
  await browser.close();
})();

Zied Hamdi 0 Reputation points

2023-06-30T15:04:40.76+00:00

I also found this bug in Firefox, which might explain the source of the bug (too many arguments in the apply method)
https://bugzilla.mozilla.org/show_bug.cgi?id=1632722

Zied Hamdi 0

Digging further, I found the element that is causing the failure. It's a Sveltekit progress component I developed, and here's the code that crashes the browser: There's no suitable formatter for SvelteKit, so just copy paste it in a decent editor

<script> //radial/circular progress inspired from : https://nikitahl.com/circle-progress-bar-css import { onMount } from 'svelte'; export let max, current, fg = '#808080', size = '1.3em', pill = false, bg = null; if (!(fg.length === 7 && fg.startsWith('#')) && !(fg != null && fg.startsWith('var('))) {  console.error('fg parameter must be a #rrggbb color or a var() value (without transparency): \'' + fg + '\' invalid ');  fg = '#808080'; } $: progress = current / max * 100; $: emptyBg = fg + '1f';//add transparency let progressElement; function getAppliedBackgroundColor(element) {  let currentElement = element;  let backgroundColor = '';  while (currentElement && backgroundColor === '') {   const computedStyle = getComputedStyle(currentElement);   const currentBackgroundColor = computedStyle.backgroundColor;   if (currentBackgroundColor !== 'rgba(0, 0, 0, 0)') {    backgroundColor = currentBackgroundColor;   } else {    currentElement = currentElement.parentElement;   }  }  return backgroundColor; } onMount(async () => {  if (!bg && !pill) {   await new Promise(resolve => setTimeout(resolve, 300));/*wait until the page displays*/   bg = getAppliedBackgroundColor(progressElement);   //WARN: sometimes the bg value returns an empty space   if (bg == null || bg.trim().length === 0) {    bg = '#eeeeee';   }  } });</script>{#if pill} <div bind:this={progressElement}    class='progress-pill flex flex-col flex-nowrap justify-end w-2 h-3 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700 cursor-pointer'    on:click>  <div class='indicator overflow-hidden' role='progressbar' style={`height: ${progress}%; background-color:${fg}`}     aria-valuenow=${progress} aria-valuemin='0' aria-valuemax={max}></div> </div>{:else} <div bind:this={progressElement} class='progress-circle' on:click    style={`background: radial-gradient(closest-side, ${bg} 40%, transparent 80% 100%),                conic-gradient(${fg} ${progress}%, ${emptyBg} 0);                width:${size}; height:${size}`}    role='progressbar'    aria-valuenow='75' aria-valuemin='0' aria-valuemax='100'></div>{/if}<style>    .progress-circle {        border-radius: 50%;        cursor: pointer;    }</style>

2 answers

Yijing Sun-MSFT 7,066 Reputation points

2022-02-28T03:00:57.977+00:00

Hi @Nico Freeman ,
I suggest you could check the Chrome extensions for any conflicting print extensions. Also, do you have either the Docs Viewer or the Docs PDF Viewer installed?

Best regards,
Yijing Sun

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment
Nico Freeman 11 Reputation points

2022-02-28T17:25:23.23+00:00

Hello YijingSun!

This Chrome is completely new, I uninstalled and reinstalled Google Chrome completely with the latest build, without any configuration or extensions. We are using PDF Viewer.
Please sign in to rate this answer.
Yijing Sun-MSFT 7,066 Reputation points

2022-03-01T05:17:01.917+00:00

Hi @Nico Freeman ,
Is your PDF Viewer extension? If not,you could enable an extension called PDF Viewer in Google Chrome.

Nico Freeman 11 Reputation points

2022-03-02T14:04:35.68+00:00

We are using the built in functionality of google chrome, so is not the same.

Yijing Sun-MSFT 7,066 Reputation points

2022-03-03T02:31:27.163+00:00

Hi @Nico Freeman ,
It may be the reason of your problems.Google's built-in function may not be able to load the PDF. I suggest you need to add a 3rd party PDF Viewer extension.
Best regards,
Yijing Sun

Zied Hamdi 0 Reputation points

2023-06-30T09:35:22.18+00:00

I tried it on Brave, and the first attempt the preview worked, but as soon as I unchecked the option for header and footer, it started showing me the error too, and there was no way of getting it working back
Sign in to comment