Comments (10)
john-pellegrini
commented on August 20, 2024
1
@MatthewHerbst - thank you again for your responses. I'm checking with others to see if there aware of anything that might be causing this to happen
from react-to-print.
MatthewHerbst
commented on August 20, 2024
Hey there. Could you share your setup please (a Codesandbox or similar would be ideal)? We do inject the doctype into the HTML of the iframe being printed, but not sure how it could be actually displaying for you
from react-to-print.
john-pellegrini
commented on August 20, 2024
Actually when I'm running/developing the react app on my
local machine I don't see the "doctype" in the print dialog window. This only happened when the code was pushed to our test servers. I'm happy to share what ever you think could be helpful, but it's a very large react app so when you say "setup" what specifically would help you? thank you
This is the component where I've added the useReactToPrint hook:
viewScreen.txt
from react-to-print.
MatthewHerbst
commented on August 20, 2024
Thanks! Do you know if your custom print function is getting used in this case? If so, could you share the customToPrint function's implementation?
from react-to-print.
john-pellegrini
commented on August 20, 2024
I'm using the "custom" print function in one of the pages I'm implementing the print functionality, however it shows the doc type in the other 2 as well. This is my custom function:
const customToPrint = (printWindow: HTMLIFrameElement): Promise<void> => {
const printContent = printWindow.contentDocument || printWindow.contentWindow?.document;
const printedScrollContainerList = printContent?.querySelectorAll('.MuiDataGrid-virtualScroller');
const originScrollContainerList = document.querySelectorAll('.MuiDataGrid-virtualScroller');
if (!printedScrollContainerList || !originScrollContainerList) {
return Promise.resolve();
}
const getScrollHeaderText = (scrollContainer: Element): string | null | undefined =>
scrollContainer
.closest('div[data-testid="layout-gadget-grid"]')
?.querySelector('div[class*="-header"] > span')?.textContent;
const originScrollContainerRecords: Record<string, Element> = Array.from(originScrollContainerList).reduce(
(acc, scroll) => {
const scrollHeaderText = getScrollHeaderText(scroll);
scrollHeaderText && (acc[scrollHeaderText] = scroll);
return acc;
},
{},
);
Array.from(printedScrollContainerList).forEach((printedScrollContainer) => {
const scrollHeaderText = getScrollHeaderText(printedScrollContainer);
scrollHeaderText &&
printedScrollContainer?.scrollTo(0, Number(originScrollContainerRecords[scrollHeaderText]?.scrollTop));
});
printWindow?.contentWindow?.print();
// print must return a Promise
return Promise.resolve();
};from react-to-print.
john-pellegrini
commented on August 20, 2024
@MatthewHerbst - if you have any idea how the doctype declaration could be added to the body tag please let me know?
Thanks
from react-to-print.
MatthewHerbst
commented on August 20, 2024
I'm truly not sure. I've tested the code we run and in Chrome 126 on my machine it does not do that:
const printWindow = document.createElement("iframe");
printWindow.srcdoc = "<!DOCTYPE html>";which gives
What stands out to me looking at your code in the image above is that it seems the srcdoc property on your iframe isn't correct. It has srcdoc="<!DOCTYPE html>" when it should be srcdoc="<!DOCTYPE html>"
Do you have some sort of safety encoding going on or something? < is the code for < and > is the code for >.
from react-to-print.
john-pellegrini
commented on August 20, 2024
Ok thank you for checking - it's working fine for me locally as well, but once the code gets pushed to our test servers this issue occurs. Like you said it seems there's some additional encoding occurring for some reason. (frustrating)
Another quick question?
Is there a way to access the print window other then in the "print" api function? I'm trying to come up with a "hack" to prevent this but I don't want to create a "custom" print function for every component
from react-to-print.
MatthewHerbst
commented on August 20, 2024
Is there a way to access the print window other then in the "print" api function?
If you ensure that removeAfterPrint: false is set on the printing options then after the print is run the printing iframe (with ID of "printWindow") should still be in your DOM and you can inspect it directly. The iframe will be replaced the next time you click print.
(In v3 of this lib which I'm working on we remove it by default and preserving it is opt-in, but for now it's preserved by default since that's been the behavior for years and changing that would be a breaking change)
from react-to-print.
MatthewHerbst
commented on August 20, 2024
Regarding the encoding, do you have a script on your page maybe that's trying to make sure all added code has tags removed to prevent execution? For example, you might be trying to prevent folks from injecting <script>badFunction()</script> type things, though I've never seen something be so encompassing as to detect setting a random property on a runtime-only iframe
from react-to-print.
Related Issues (20)
- codesandbox examples are not loading HOT 2
- onAfterPrint is called before print iframe appears HOT 1
- On mobile devices are not truncated accordingly ref HOT 1
- Add Border to every Page HOT 4
- Add dynamic colors to print function HOT 1
- How to check that the user click on Save in `onAfterPrint`? HOT 2
- getting Supplied Data is not a valid base64-String jsPDF.convertStringToImageData erorr while directly downloading image HOT 1
- Border top and bottom HOT 1
- Save as PDF hangs in print view HOT 1
- Blank PDF when trying to generate in production. HOT 2
- How should i handle large data to print? HOT 8
- Why does it render different content when in im browsing in mobile HOT 4
- Blank Page while printing after a certain period of time HOT 9
- How to add style using PageStyle prop, without it overriding component’s style HOT 5
- Warning: findDOMNode is deprecated outside StrictMode. HOT 13
- Unhandled error when trying to print not fully loaded canvas elements HOT 5
- Print datatables HOT 4
- CSS "break-before" (replacing "page-break-before") not supported HOT 3
- '.brf' file : Change the save directory. HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-to-print.