Can we have hidden WebView2 and still invoke Printing? #3266

ajtruckle · 2023-03-06T06:52:22Z

Environment: MFC / Win32 / CDialog

My current program uses CHtmlView. I have a CHtmlView attached to my dialog. On this control I display an "editor" version of a schedule. I can replicate this behaviour using a WebView2 control.

When the user wants to print, it currently does this:

Create hidden CHtmlView
Load a "printable" version of the schedule.
Display print preview full screen.
Destroy the hidden CHtmlView if they cancel printing.
Destroy the hidden CHtmlView when they shut my program down (if it exists).

So:

How can I create this second hidden WebView2 control?
How can I invoke a full screen print preview despite it being hidden?
How can I destroy it if printing is cancelled?

Thank you for your guidance for this as I do not know how to do any of this. I only know how to create the initial WebView2 attached to my CDialog which has the editors' version of the schedule.

Thank you in advance for taking me through the essential steps of what is involved.

The text was updated successfully, but these errors were encountered:

ajtruckle · 2023-03-06T07:44:18Z

I originally asked this question here: #1485. And, in that question I was redirected to: #1331.

But, whilst a Print API has now been developed, my questions remain:

How to invoke a hidden WebView2 control not attached to my dialog?
How to invoke a full screen print preview from this hidden WebView2 control?

I really would like to move on with implementing WebView2 in my application and these queries were originally raised in July 2021. I appreciate there is much to do!

Any sample code of the main concepts appreciated. Thanks.

ajtruckle · 2023-03-06T08:02:29Z

I am open to suggestions to make this easier. For example:

Show a visible maximized webview2 on the screen (model style)
Automatically load the printable schedule and invoke printing with preview
Terminate browser control once printing has been issued or cancelled.

What ever is easiest to implement that still looks nice from a users perspective.

Thanks for your help!

novac42 · 2023-03-06T08:24:17Z

Thanks for reaching out. I've assigned this to a dev that can help follow up on this.

ajtruckle · 2023-03-06T18:42:46Z

@novac42 @monica-ch

Thank you! At first I tried to create a second invisible browser control:

void CChristianLifeMinistryEditorDlg::InitialiseWebPreview2()
{
	m_pWebBrowser = std::make_unique<CWebBrowser>();
	if (m_pWebBrowser != nullptr)
	{
		m_lblHtmlPreview.GetWindowRect(m_rctHtmlPreview);
		ScreenToClient(m_rctHtmlPreview);

		m_pWebBrowser->CreateAsync(
			WS_VISIBLE | WS_CHILD,
			m_rctHtmlPreview,
			this,
			1,
			[this]() {
				m_pWebBrowser->SetParent(this);
				m_pWebBrowser->DisablePopups();
				m_pWebBrowser->AddContextMenuRequestedHandler();

				UpdatePreview();

			});
	}

	/*
	m_pWebBrowserPrint = std::make_unique<CWebBrowser>();
	if (m_pWebBrowserPrint != nullptr)
	{
		m_lblHtmlPreview.GetWindowRect(m_rctHtmlPreview);
		ScreenToClient(m_rctHtmlPreview);

		m_pWebBrowserPrint->CreateAsync(
			WS_VISIBLE | WS_CHILD,
			m_rctHtmlPreview,
			this,
			1,
			[this]() {
				m_pWebBrowserPrint->SetParent(this);
				m_pWebBrowserPrint->DisablePopups();
			});
	}
	*/
	
}

As you can see, I have commented the code out. It did not work. Because when I tried to do my own printing, the first thing I did was to navigate to my printer version of the schedule and try to print. No joy.

ajtruckle · 2023-03-07T06:47:29Z

From my research it seems that it is not possible to use a WebView2 control in a hidden state because it is not fully initialised until it is displayed.

Can we do this then?

Display a temporary pop up window using the existing visible browser control on my dialog.
Maximize this pop up.
Invoke print preview for pop up
If cancelled or printing completes destroy the pop up.

monica-ch · 2023-03-07T07:31:40Z

@ajtruckle Yes you can open the printable version of the schedule in a webview2 popup, invoke the print dialog and use JS afterprint that fires when printing is started (~when user click Print button) or cancelled and close the popup.

ajtruckle · 2023-03-07T07:33:50Z

@monica-ch Thanks for confirming. Can you please guide me on the steps involved for Win32 API?

ajtruckle · 2023-03-07T10:21:20Z

@monica-ch I came up with a partially successful solution:

if (m_pWebBrowser != nullptr)
{
	m_pWebBrowser->Navigate(strPreviewXML,
		[this, bTriggeerPrintEvent]() {
			if (bTriggeerPrintEvent)
				m_pWebBrowser->ShowPrintUI(COREWEBVIEW2_PRINT_DIALOG_KIND_BROWSER);
		});
}

This code re-uses the same browser control. But I don't know how to use the JS afterprint you referred to because I will need to re-call UpdatePreview() after it has printed / saved as PDf or been cancelled so that the editor returns to the "Editor" version of the schedule. If we can get this working it would be a temporary way forward. But ideally I would like a full screen popup window instead so we can take advantage of the preview area.

monica-ch · 2023-03-08T22:37:44Z

We have ExecuteScript API that runs JS code. In the afterprint event callback that invokes when is print is completed/cancelled, post a web message to the native code. Listen to add_WebMessageReceived event that triggers when a page posts a message and do UpdatePreview() or something.

window.addEventListener('afterprint', (event) => {
 window.chrome.webview.postMessage('PrintDone');
});

m_webView->add_WebMessageReceived(
    Microsoft::WRL::Callback<ICoreWebView2WebMessageReceivedEventHandler>(
     [this](ICoreWebView2* sender, ICoreWebView2WebMessageReceivedEventArgs* args)
     {
         .....
         return S_OK;
     })
    .Get(), nullptr);

ajtruckle · 2023-03-08T22:47:03Z

Hi @monica-ch Thanks.

I have changed the logic to avoid the need to do an update afterwards. So that simplifies it.

So, step 1, how do I used ExecuteScriot to create the pop up window, maximised to the display, and invoke the print up? What’s the code for that? Thanks.

When the print finishes / cancels what I need it to do is close this pop up window we created

I appreciate the example provided but I need a little more help to understand the correct code. Thank you.

monica-ch · 2023-03-09T02:06:35Z

You might have to do something like below.

Open a new window pop up using ExecuteScript API and JS window.open(url).
Handle the new window using add_NewWindowRequested API, refer add_NewWindowRequested here.
Once new window webview is set, register add_WebMessageReceived, add_NavigationCompleted events.
In the navigation completed callback, register afterprint and call ShowPrintUI.

m_webView->ExecuteScript(L"window.open(url)",
                        Callback<ICoreWebView2ExecuteScriptCompletedHandler>(
                            [](HRESULT error, PCWSTR result) -> HRESULT { return S_OK; })
                            .Get());

    //! [NewWindowRequested]
    CHECK_FAILURE(m_webView->add_NewWindowRequested(
        Callback<ICoreWebView2NewWindowRequestedEventHandler>(
            [this](ICoreWebView2* sender, ICoreWebView2NewWindowRequestedEventArgs* args)
            {
                if (!m_shouldHandleNewWindowRequest)
                {
                    args->put_Handled(FALSE);
                    return S_OK;
                }
                wil::com_ptr<ICoreWebView2Deferral> deferral;
                CHECK_FAILURE(args->GetDeferral(&deferral));
                AppWindow* newAppWindow;

                wil::com_ptr<ICoreWebView2WindowFeatures> windowFeatures;
                CHECK_FAILURE(args->get_WindowFeatures(&windowFeatures));

                RECT windowRect = {0};
                UINT32 left = 0;
                UINT32 top = 0;
                UINT32 height = 0;
                UINT32 width = 0;
                BOOL shouldHaveToolbar = true;

                BOOL hasPosition = FALSE;
                BOOL hasSize = FALSE;
                CHECK_FAILURE(windowFeatures->get_HasPosition(&hasPosition));
                CHECK_FAILURE(windowFeatures->get_HasSize(&hasSize));

                bool useDefaultWindow = true;

                if (!!hasPosition && !!hasSize)
                {
                    CHECK_FAILURE(windowFeatures->get_Left(&left));
                    CHECK_FAILURE(windowFeatures->get_Top(&top));
                    CHECK_FAILURE(windowFeatures->get_Height(&height));
                    CHECK_FAILURE(windowFeatures->get_Width(&width));
                    useDefaultWindow = false;
                }
                CHECK_FAILURE(windowFeatures->get_ShouldDisplayToolbar(&shouldHaveToolbar));

                windowRect.left = left;
                windowRect.right =
                    left + (width < s_minNewWindowSize ? s_minNewWindowSize : width);
                windowRect.top = top;
                windowRect.bottom =
                    top + (height < s_minNewWindowSize ? s_minNewWindowSize : height);

                // passing "none" as uri as its a noinitialnavigation
                if (!useDefaultWindow)
                {
                    newAppWindow = new AppWindow(
                        m_creationModeId, GetWebViewOption(), L"none", m_userDataFolder, false,
                        nullptr, true, windowRect, !!shouldHaveToolbar);
                }
                else
                {
                    newAppWindow = new AppWindow(m_creationModeId, GetWebViewOption(), L"none");
                }
                newAppWindow->m_isPopupWindow = true;
                newAppWindow->m_onWebViewFirstInitialized = [args, deferral, newAppWindow, this]()
                {
                    CHECK_FAILURE(args->put_NewWindow(newAppWindow->m_webView.get()));

                        CHECK_FAILURE(newAppWindow->m_webView->add_WebMessageReceived(
                        Microsoft::WRL::Callback<ICoreWebView2WebMessageReceivedEventHandler>(
                            [this](
                                ICoreWebView2* sender,
                                ICoreWebView2WebMessageReceivedEventArgs* args)
                            {
                                wil::unique_cotaskmem_string messageRaw;
                                CHECK_FAILURE(args->TryGetWebMessageAsString(&messageRaw));

                                if(messageRaw.get() == L"PrintDone")
                               {
                                /// UpdatePreview...
                               }
                                return S_OK;
                            })
                            .Get(),
                        nullptr));
                          
                            /// open the print dialog once navigation is completed
                            CHECK_FAILURE(newAppWindow->m_webView->add_NavigationCompleted(
                            Callback<ICoreWebView2NavigationCompletedEventHandler>(
                                [this, newAppWindow](
                                    ICoreWebView2* sender,
                                    ICoreWebView2NavigationCompletedEventArgs* args) -> HRESULT
                                {
                                   /// Register `afterprint` event in the new window      
                              newAppWindow->m_webView->ExecuteScript(
                        LR"~(
                    window.addEventListener('afterprint', (event) => {
                      window.chrome.webview.postMessage('PrintDone');
                     });
                    )~",
                        Callback<ICoreWebView2ExecuteScriptCompletedHandler>(
                            [](HRESULT error, PCWSTR result) -> HRESULT { return S_OK; })
                            .Get());

                                    /// Show print ui
                                    auto webView2_16 =
                                        newAppWindow->m_webView.try_query<ICoreWebView2_16>();
                                    CHECK_FEATURE_RETURN(webView2_16);
                                    CHECK_FAILURE(webView2_16->ShowPrintUI(
                                        COREWEBVIEW2_PRINT_DIALOG_KIND_BROWSER));

                                    return S_OK;
                                })
                                .Get(),
                            nullptr));

                    CHECK_FAILURE(args->put_Handled(TRUE));
                    CHECK_FAILURE(deferral->Complete());
                };
                return S_OK;
            })
            .Get(),
        nullptr));
    //! [NewWindowRequested]

ajtruckle · 2023-03-09T09:39:10Z

Hi @monica-ch ! Thanks for the code / explanations.

Beginning with the first step, I tried:

void CWebBrowser::ShowPrintUIFullScreen()
{
	if (m_pImpl->m_webView)
	{
		m_pImpl->m_webView->ExecuteScript(L"window.open(url)",
			Callback<ICoreWebView2ExecuteScriptCompletedHandler>(
				[](HRESULT error, PCWSTR result) -> HRESULT { return S_OK; })
			.Get());
	}
}

I call this function on demand for now, once I have something on the display. But, running this code alone appears to do nothing. 🤔 I get no errors and no popup on screen. Why? I thought that would happen at this stage.

In-fact, if I use the sample WebView2 app and use Inject Script on the Script menu:

window.print() works (also works in my code).
window.open(url) does not work. Just shows a popup message saying "Null".

ajtruckle · 2023-03-10T23:37:24Z

Hi @monica-ch
Is it because I am literally using url?

monica-ch · 2023-03-10T23:39:11Z

@ajtruckle Yes, please specify a valid URL.

ajtruckle · 2023-03-11T09:03:07Z

@monica-ch Slowly getting there:

void CWebBrowser::ShowPrintUIFullScreen(const CString strUrl)
{
	if (m_pImpl->m_webView)
	{
		m_pImpl->m_webView->ExecuteScript(L"window.open('" + strUrl + L"')",
			Callback<ICoreWebView2ExecuteScriptCompletedHandler>(
				[](HRESULT error, PCWSTR result) -> HRESULT { return S_OK; })
			.Get());
	}
}

If I use a literal url like 'https://www.microsoft.com' it displays in a popup. But when I try to use my my strUrl parameter (which is the literal file path on my PC to the same html file it will not find it. I tried NormalizeUrl(strUrl) and still no joy. We basically need it to display the same url that is displayed in the active view. How do we do this step? Thanks.

ajtruckle · 2023-03-11T13:46:00Z

@monica-ch Got the first step working! Now on to next. 😊

ajtruckle · 2023-03-11T14:21:55Z

@monica-ch So I have managed to do the first bit like this:

void CWebBrowser::ShowPrintUIFullScreen(const CString strUrl)
{
	if (m_pImpl->m_webView)
	{
		CRect rctSize;
		GetParentWindow()->GetClientRect(rctSize);
		rctSize.DeflateRect(10,10);
		CString strJS;

		strJS.Format(L"window.open('%s', 'customWindow', 'width=%d, height=%d, top=%d, left=%d')",
			GetLocationURL(), rctSize.Width(), rctSize.Height(), rctSize.top, rctSize.left);

		m_pImpl->m_webView->ExecuteScript(strJS,
			Callback<ICoreWebView2ExecuteScriptCompletedHandler>(
				[](HRESULT error, PCWSTR result) -> HRESULT { return S_OK; })
			.Get());
	}
}

Displays popup window
Loads the same webpage.
Resizes to fit the application window

I could adjust it to take the work area instead to maximize to screen. But the window should be maximized anyway. It seemed just a little simpler.

My problem with the sample code is that it is using AppWindow. I don't use that class as it has a lot of baggage I don't need. So I have my CWebBrowser / CWebBrowserImpl() classes which are much simpler. I need to try and stitch the right code into CWebBrowser to:

Once new window webview is set, register add_WebMessageReceived, add_NavigationCompleted events.
In the navigation completed callback, register afterprint and call ShowPrintUI.

ajtruckle · 2023-03-11T14:39:01Z

@monica-ch I have come up with a compromise. I added a new "Full Screen" button to my editor. So if they want to print and would like a bigger area to work with, they click the button to get the bigger view. Then, they right-click and invoke Print.

It sets us to where we want to be with a couple of mouse clicks and no extra code.

Personally, I would like to add for the team to consider extending the ShowPrintUI, when using the browser dialog, to have a second parameter - display on maximixed popup window.

This means anyone can use it if they need to and will be useful for CDialog users like me.

But I am happy with this compromise of showing a maximized popup to the dialog size. I may change to use screen size.

ajtruckle · 2023-04-02T19:47:58Z

Hi @monica-ch Can I please ask the status of this ticket? Will any of my ideas be put on the feature list and tracked?

ajtruckle added the question label Mar 6, 2023

novac42 assigned vickiez and monica-ch and unassigned vickiez Mar 6, 2023

ajtruckle mentioned this issue Mar 9, 2023

Full screen Print Preview window #1488

Closed

ajtruckle mentioned this issue Mar 15, 2023

Controlling the print dialog/window #42

Open

ajtruckle mentioned this issue Apr 5, 2023

Browser's print preview dialog window is not displayed for a hidden browser window control #3361

Open

MicrosoftEdge locked and limited conversation to collaborators Oct 10, 2023

victorhuangwq converted this issue into discussion #4027 Oct 10, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

This issue was moved to a discussion.

Can we have hidden WebView2 and still invoke Printing? #3266

Can we have hidden WebView2 and still invoke Printing? #3266

ajtruckle commented Mar 6, 2023 •

edited

Loading

ajtruckle commented Mar 6, 2023 •

edited

Loading

ajtruckle commented Mar 6, 2023 •

edited

Loading

novac42 commented Mar 6, 2023

ajtruckle commented Mar 6, 2023

ajtruckle commented Mar 7, 2023

monica-ch commented Mar 7, 2023

ajtruckle commented Mar 7, 2023

ajtruckle commented Mar 7, 2023

monica-ch commented Mar 8, 2023 •

edited

Loading

ajtruckle commented Mar 8, 2023

monica-ch commented Mar 9, 2023

ajtruckle commented Mar 9, 2023 •

edited

Loading

ajtruckle commented Mar 10, 2023

monica-ch commented Mar 10, 2023

ajtruckle commented Mar 11, 2023

ajtruckle commented Mar 11, 2023

ajtruckle commented Mar 11, 2023

ajtruckle commented Mar 11, 2023

ajtruckle commented Apr 2, 2023

This issue was moved to a discussion.

This issue was moved to a discussion.

Can we have hidden WebView2 and still invoke Printing? #3266

Can we have hidden WebView2 and still invoke Printing? #3266

Comments

ajtruckle commented Mar 6, 2023 • edited Loading

ajtruckle commented Mar 6, 2023 • edited Loading

ajtruckle commented Mar 6, 2023 • edited Loading

novac42 commented Mar 6, 2023

ajtruckle commented Mar 6, 2023

ajtruckle commented Mar 7, 2023

monica-ch commented Mar 7, 2023

ajtruckle commented Mar 7, 2023

ajtruckle commented Mar 7, 2023

monica-ch commented Mar 8, 2023 • edited Loading

ajtruckle commented Mar 8, 2023

monica-ch commented Mar 9, 2023

ajtruckle commented Mar 9, 2023 • edited Loading

ajtruckle commented Mar 10, 2023

monica-ch commented Mar 10, 2023

ajtruckle commented Mar 11, 2023

ajtruckle commented Mar 11, 2023

ajtruckle commented Mar 11, 2023

ajtruckle commented Mar 11, 2023

ajtruckle commented Apr 2, 2023

This issue was moved to a discussion.

ajtruckle commented Mar 6, 2023 •

edited

Loading

ajtruckle commented Mar 6, 2023 •

edited

Loading

ajtruckle commented Mar 6, 2023 •

edited

Loading

monica-ch commented Mar 8, 2023 •

edited

Loading

ajtruckle commented Mar 9, 2023 •

edited

Loading