html2pdf not working with reactjs in Firefox - javascript

We are using this package with ReactJS. This is working as per expectation in all browsers except Firefox. When the user interacts to download the PDF, Firefox hangs completely, and show attached message.Memory usage looks fine.
Screenshot of Browser Message:

Are you trying dynamic import by any chance?

As according to me, If I understood your question, it seems like its a module issue that you are using, because it's an open issue not Fixed yet.
(description link:https://github.com/eKoopmans/html2pdf/issues/45 )
You can use some other popular library like react-pdf, PDFKit, pdfshift.
Hopefully, this can solve your issue.

Related

Vue.js page inside iframe not showing on Firefox

We have a Vue.js page contains a Echarts pie draft, and we want to show it in another project, which is using jQuery.
It shows perfectly both on Chrome and IE, but on Firefox there's nothing showing.
We tried to replace the Echarts page with some basic numbers in the template, but it's still empty in Firefox.
This is what it looks like in chrome:
And this is Firefox, which only has an empty app tag:
Any help would be appreciated.
edit:
I'm using Firefox93 on 64bit, there are no errors showing in the console.
This is how we inserted the iframe:
Is the website you're trying to load the iframe in secure (https)?
I see you're trying to iframe an http url
Unlike HTTP images in an HTTPS page, which are allowed through with a little warning on the padlock, iframes are considered potentially dangerous active content and HTTP iframes won't be loaded into an HTTPS page.
Besides that the same-origin policy might have something to do with it
When it comes to several browsers is working well, and when opened in another browser it has something wrong, It should be the Web API or Browser API used by the library, in this case, VueJS.
The possible solutions from the estimated source of the problem are:
Update the VueJS to the latest version.
I hope this forum is useful: https://forum.vuejs.org/t/iframes-in-vue/102268, the questionnaire has a problem with its source link. But I think you are not experiencing this. And it is useful for anyone who visited this question.
If the problem is to be solved, I recommended using other people's custom libraries, like this: https://www.npmjs.com/package/vue-iframes. Because those libraries are developed to answer several problems that the creator facing that probably other people would be experiencing too.

'React-Native-Share' Library fails to compile on Web

I've been creating react-native app to share text or images to social platforms.
I've used React-Native-Share library to serve the purpose of my application.
This library is working fine for iOS & Android but when I'm running it on Web.
I'm facing compiling failed error (Syntax Error). It seems like React-Native-Web cannot parse the syntax used by this library.
As far as I researched on it. I think I need to setup webpack.config.js for this to work, but as I've never did this before so not sure how it works and how to set it up.
Please see the attached screenshot
Syntax Error
Thank you in advance :)

React-native facebook login crash on Android

I'm using react-native facebook login through this library: react-native-fbsdk. Following the installation guide did not completely get it working, but I managed to get it working after modifications on the native side, as instructed in many github issues etc.
Anyways, it was working fine two weeks ago, but now, when I try to login with facebook, the application immediately crashes. It doesn't open any login page or do anything else.
What is weird is that if I open a browser in the emulator, leave it to background, and then try to login, the login goes further (I get to actually login, but when I'm directed back, the application crashes).
From the tombstone files I am able to get following warnings/messages:
Expected native library version number "",actual native library
version number ""
Tens like these:
Could not find generated setter for class
com.facebook.reactnative.androidsdk.FBLoginButtonManager
How could I solve this problem? And why it doesn't work anymore? I didn't change anything in the code. Only thing I can think of is that it loads something from the internet during compiling the application. How could it otherwise fail?
This is answer for how I solved the problem, not that much about why it was behaving like this.
In short:
I got it working again by updating the emulator and android API 6.0 through Android Studio.
<Rant state='begin'>
I have no idea why this worked, nor why did it broke in the first place. As it was working good with the old emulator and API 6.0 earlier.
It seems like the react-native fbsdk is far from stable. Or then it is completely react-native's fault, idk to be honest. But this just makes me want to develop fully native, instead of react-native, which seems unstable from my experience so far.
<Rant state='end'>

JSpdf working in Internet Explorer but not working in Chrome

Hi I am a bit stuck here, trying to use jspdf for printing html to pdf. So first of all I tried with some examples and it worked. But when I try to implement the same in My Django Website, there is an issue.
1. Its working with Internet explorer, I am able to download the Pdf
2. But same is not working with Chrome (why).
By following some post :get_URL().createObjectURL error I was able understand that:
issue is with the AJax Calls where i am changing the URL to some other
value.
Also looked in to :window.URL.createObjectURL(blob); is undefined in my application
But it doesn't says any clear solution to the problem. How to make the things work.
So far I have checked : None of the JS files inclusion is missed , as
its working fine with internet explorer. But in Explorer my ajax Calls doesn't works
Here is the error I am getting
Any help would be appreciated :)
Not sure if I can help much, but what I understand is that the error you are seeing is caused by createObjectURL being undefined, so the first thing I would check is why this happens.
Have you tried writing something like window.ULR.createObjectURL(new Blob) in the console? Try writing this on your application page, and if it stil happens, you have something that changes the URL object.
The next step would be to temporarily remove one javascript file at a time to find out which one makes the trouble.
Note: Yes, I know the question is old, but it still deserves a solution.

Opening Bookmark Dialog from Javascript

The way I did it before with window.sidebar.addPanel() does not work for latest version of Firefox. I try to use PlacesUIUtils.showBookmarkDialog as adviced in How to call for Firefox bookmark dialog?
It is (in the advice) preceded by Components.utils.import("resource:///modules/PlacesUIUtils.jsm");
The problem is that documents tell that .import() may be called only on (local) file. I want the thing to work for a casual user (without requiring any plugins preinstalled).
Is this approach usable in general? Can I not import from elsewhere? Any other suggestions?
See https://support.mozilla.org/en-US/questions/985670 - the answer I got there is basically NOT IT IS NOT POSSIBLE to implement opening the Bookmarks Dialog in Firefox. So I have followed a simplified solution (though valid across browsers).

Categories

Resources