I'm building an app that will have an interactive PDF form on a server (in HTML, CSS, JS). I have been trying to use the Grapecity PDF viewer, but to no avail. I've followed the documentation to a T, using these resources: one, two, three.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>GC Viewer Demo | PDF Plugin</title>
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css">
<script>
function loadPdfViewer(selector) {
var viewer = new GcPdfViewer(selector, { renderInteractiveForms: true });
viewer.addDefaultPanels();
viewer.open("HelloWorld.pdf");
}
</script>
</head>
<body onload="loadPdfViewer('#root')">
<div id="root"></div>
<script type="text/javascript" src="gcpdfviewer.js"></script>
</body>
</html>
I currently have the "HelloWorld.pdf" and the gcpdfviewer javascripts in the same folder as the above index.html but every time I test the code in the browser, the PDF viewer loads, but the PDF doesn't, giving me an error that states "missing PDF."
This is really bothering me because the PDF is exactly where it's supposed to be, I think.
I'm currently not using a license key, but the documentation makes it seems like I don't need one. Maybe that's the issue.
Any ideas?
Edit - Here are the console errors in Chrome:
The pdf worker has been disabled. Note, rendering PDF in foreground thread can slow pdf viewer performance.
ce # gcpdfviewer.js:1
index.html:1 Access to XMLHttpRequest at 'file:///C:/HelloWorld.pdf' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
HelloWorld.pdf:1 Failed to load resource: net::ERR_FAILED
index.html:1 Uncaught (in promise) V
Firstly, the issue is not because of the non-license version.
The issue occurs because you are trying to execute the sample locally using the file system. To overcome this issue, you should host the application on a local server and the Pdf will be loaded in the PdfViewer.
While loading a Pdf in the PdfViewer, there is XMLHttpRequest which checks the origin. This is null in the case of the file system. Hence, throws the error on accessing the file.
Here is the documentation link for configuring the PdfViewer:
https://www.grapecity.com/documents-api-pdf/docs/online/view-pdf.html
Regards,
Manish Gupta
Thank you for using GCPDF Viewer. Is the filename exactly the same, it might be case-sensitive OS?
Can you look in the browser network tab and watch for the request going to retrieve the PDF file, is it looking in the same location where you have placed the file.
which server software are you running? is it serving the PDF file?
http://www.grapecity.com
As stated earlier, for security reasons, it is not possible to access files on your local filesystem via JavaScript, you need to set up a web server and open PDF files using the web server url.
But if you really want to do it, there is another workaround - start Chrome with disabled web security, and then open the index.html page from the local file system, for example:
"c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C:/temp/CustomChromeSession" --disable-web-security "file:///C:/temp/gcpdfviewer-test/index.html"
Note, this workaround is not recommended due to security reasons and this approach can be disabled by browser developers later.
Here's a screenshot of how it works
Related
I am in a situation where I am maintaining a page of opening hours that sometimes change. The page is used on several different platforms:
An external CMS system on http Danish and English
A Sharepoint intranet on https in Danish and English
In order to not have to change 4 different pages each time the opening hours change, I am loading the opening hours from a single javascript file which I have located on another server.
The script is here: https://blanketter.science.ku.dk/studenterservice/studenterservice-content.js
I am loading the page using the below code below:
<html>
<head>
<title></title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="https://blanketter.science.ku.dk/studenterservice/studenterservice.css">
<script type="text/javascript" src="https://blanketter.science.ku.dk/studenterservice/studenterservice-content.js"></script>
</head>
<body>
<div id="dynamic-intro">Error message if JavaScript disabled or Firefox used.</div>
<div id="dynamic-specialOpeningHours">Error message if JavaScript disabled or Firefox used.</div>
<div id="dynamic-contact">Error message if JavaScript disabled or Firefox used.</div>
<div id="dynamic-closedWeeks">Error message if JavaScript disabled or Firefox used.</div>
<div id="dynamic-directions">Error message if JavaScript disabled or Firefox used.</div>
<script language="JavaScript" type="text/javascript">
document.getElementById('content').className = "subpage wide";
</script>
<script type="text/javascript">
writePageByLanguage('danish');
</script>
</body>
</html>
You can see an example of this at http://www.science.ku.dk/uddannelser/studenterservice/vejledning_kopi/.
The site works as it should in Chrome and Internet Explorer/Edge, but Firefox fails to load the .js file and displays the eror message instead.
I have tried to place the .js file on a http:// server instead (different hosting provider). In this case Firefox is able to display the content.
Any help in clearing up how I could possible fix this while still having the .js file on my https server would be much appreciated.
From the Firefox Network tab:
blanketter.science.ku.dk uses an invalid security certificate.
The certificate is not trusted because the issuer certificate is
unknown. The server might not be sending the appropriate intermediate
certificates. An additional root certificate may need to be imported.
(Error code: sec_error_unknown_issuer)
You either need to get everyone visiting the site to manually trust the certificate, or get a new certificate that is signed by an authority that Firefox trusts, or fix the configuration of the server to provide the intermediate certificates.
Given an url (e.g. localhost:8000), how can a script find what resources will a browser load (via HTTP requests)?
For example, let's suppose that the / route responds with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
some content
<img src="/foo.png" alt="">
</body>
</html>
The resources which will be loaded are:
/css/style.css
foo.png
This is simple (just a dom iteration with via cheerio or so), but it's not so native I think it should.
An iteration in the response HTML will not work for the additional CSS #imports and background-image and so on.
What is the native way to get the list with the CSS, images and maybe other resources which are loaded by the browser?
Maybe is it possible via jsdom?
Like #adeneo suggested, the missing keywords were headless browser. I find it very simple via the zombie library. Below you can see a small example, however the documentation is a great resource.
// Dependencies
var Browser = require("zombie");
// Load localhost:9000
Browser.localhost("localhost", 9000);
// Load the page from localhost,
// including js, css, images and iframes
var browser = new Browser({
features: "scripts css img iframe"
});
// Open the page and list the resources
browser.visit("/", function(error) {
console.log(browser.resources.map(function (c) {
return c.request.url;
}));
});
I have just started using JSC3D.
I have followed the getting started guide in the documentation: https://code.google.com/p/jsc3d/wiki/GettingStarted
The code seems fine but my file does not seem to load, the loading bar just freezes.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Loader</TITLE>
<script type="text/javascript" src="jsc3d/jsc3d.js"></script>
<script type="text/javascript" src="jsc3d/jsc3d.webgl.js"></script>
<script type="text/javascript" src="jsc3d/jsc3d.touch.js"></script>
</HEAD>
<BODY>
<div style="width:800px; margin:auto; position:relative;">
<canvas id="cv" style="border: 1px solid;" width="750" height="400">
It seems you are using an outdated browser that does not support canvas :-(
</canvas>
</div>
<script type="text/javascript">
var viewer = new JSC3D.Viewer(document.getElementById('cv'));
viewer.setParameter('SceneUrl', 'cube.obj');
viewer.setParameter('ModelColor', '#CAA618');
viewer.setParameter('BackgroundColor1', '#E5D7BA');
viewer.setParameter('BackgroundColor2', '#383840');
viewer.setParameter('RenderMode', 'flat');
viewer.init();
viewer.update();
</script>
</BODY>
</HTML>
Does anyone know where I am going wrong?
Regards,
Mr B
EDIT: Seem to work fine when not testing in chrome. Could be a problem with loading external files in chrome.
First if you display live URL will be easier to help :)
I think you have a problem with the path to the JS jsc3d flies:
<script type="text/javascript" src="jsc3d/jsc3d.js"></script>
<script type="text/javascript" src="jsc3d/jsc3d.webgl.js"></script>
<script type="text/javascript" src="jsc3d/jsc3d.touch.js"></script>
That works well for me when the paths are correct (with your html code).
You can check the paths in the source code of the page and see if it's true.
I hope I helped you!
The JSC3D demos (e.g., Statue) work fine when viewed from a server, however when the identical code is run from the local filesystem it fails to load models in either IE or Chrome. (IE says nothing about loading, Chrome displays a progress bar and hangs). Other viewer information (background colors, background image, option controls for the BMW demo, etc.) is displayed properly. And the Avatar demo, which contains the model definition in the html file instead of an external file, runs properly when stored on the local filesystem.
Chrome discloses the problem -- the browser believes that an HTML file on the local filesystem trying to load an object from the local filesystem is a cross-site scripting attack and blocks the load:
XMLHttpRequest cannot load file:///X:/jsc3d/demos/bank/Western_Bank.obj. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.JSC3D.ObjLoader.loadObjFile # jsc3d.js:5117
jsc3d.js:5111 The XMLHttpRequest progress event property 'position' is deprecated. Please use 'loaded' instead.
jsc3d.js:5111 The XMLHttpRequest progress event property 'totalSize' is deprecated. Please use 'total' instead.
jsc3d.js:5117 Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///X:/jsc3d/demos/bank/Western_Bank.obj'.
The routine JSC3D.ObjLoader.loadObjFile (jsc3d.js lines 5071-5118) uses xhr to load objects regardless of the protocol scheme of the object file.
How to open a local disk file with Javascript? describes how to read a file from the local disk, and in order to work with local files loadObjFile() apparently needs to be modified to include a special case using FileReader instead of xhr when the object file URL refers to the local filesystem.
And even if jsc3d were modified to use FileReader, it still apparently would not work by default, according to Chrome FileReader. The browser needs to be started with the --allow-file-access-from-files switch.
I am having a tough time figuring out how to access a page loaded in an iframe from the outer page. Both pages are local files, and I'm using Chrome.
I have an outer page, and many inner pages. The outer page should always display the page title for the inner page (it makes sense in my application, perhaps less so in this stripped-down example). This works without any problem in AppJS, but I've been requested to make this app work directly in the browser. I'm getting the error "Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.".
I think this is due to Chrome's same origin policy regarding local files, but that hasn't helped me fix the problem directly. I can work around the issue in this stripped-down example by using the window.postMessage method per Ways to circumvent the same-origin policy. However, going beyond this example, I also want to manipulate the DOM of the inner page from the outer page, since this will make my code much cleaner - so posting messages won't quite do the job.
Outer Page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport">
</head>
<body>
This text is in the outer page
<iframe src="html/Home.html" seamless id="PageContent_Iframe"></iframe>
<script src="./js/LoadNewPage.js"></script>
</body>
</html>
Inner Page
<!DOCTYPE html>
<html>
<head>
<title id="Page_Title">Home</title>
<meta name="viewport">
</head>
<body>
This text is in the inner page
</body>
</html>
JavaScript
var iFrameWindow = document.getElementById("PageContent_Iframe").contentWindow;
var pageTitleElement = iFrameWindow.$("#Page_Title");
Per Is it likely that future releases of Chrome support contentWindow/contentDocument when iFrame loads a local html file from local html file?, I tried launching Chrome with the flag
--allow-file-access-from-files
But there was no change in the results.
Per Disable same origin policy in Chrome, I tried launching Chrome with the flag
--disable-web-security
But again there was no change in the results.
Per What does document.domain = document.domain do?, I had both pages run the command
document.domain = document.domain;
This resulted in the error "Blocked a frame with origin "null" from accessing a frame with origin "null". The frame requesting access set "document.domain" to "", but the frame being accessed did not. Both must set "document.domain" to the same value to allow access."
For fun, I had both pages run the command
document.domain = "foo.com";
This resulted in the error "Uncaught Error: SecurityError: DOM Exception 18".
I'm floundering. Any help from more knowledgeable people would be fantastic! Thanks!
I'm sorry to say you that I've tried during weeks to solve this issue (I needed it for a project) and my conclusion is that it's not possible.
There are a lot of problems arround local access through javascript with chrome, and some of them can be solved using --allow-file-access-from-files and --disable-web-security, including some HTML5 offline features, but I definitely think there's no way to access local files.
I recomend you not to lose your time trying to circunvend this and to try to post messages wich you can interpret into the inner pages, so you can do the DOM modifications there.
Per our discussion in my cube just a minute ago :)
I hit this same problem (Ajax post response from express js keeps throwing error) trying to get an AJAX post request to work correctly.
What got me around it is not running the file directly off the file system but instead running it from a local server. I used node to run express.js. You can install express with the following command: npm install -g express
Once that is accomplished, you can create an express project with the following command: express -s -e expressTestApp
Now, in that folder, you should see a file named app.js and a folder named public. Put the html files you wish to work with in the public folder. I replaced the file app.js with the following code:
var express = require('/usr/lib/node_modules/express');
var app = express();
app.use(function(err, req, res, next){
console.error(err.stack);
res.send(500, 'Something broke!');
});
app.use(express.bodyParser());
app.use(express.static('public'));
app.listen(5555, function() { console.log("Server is up and running"); });
Note, the require line may be different. You have to find where your system actually put express. You can do that with the following command: sudo find / -name express
Now, start the express web server with the following command: node app.js
At this time, the webserver is up and running. Go ahead and open a browswer and navigate to your ip address (or if you're on the same machine as your server, 127.0.0.1). Use the ip address:portnumber\filename.html where port number is the 5555 in the app.js file we created.
Now in that browser, you shouldn't (and didn't when we tested it) have any of these same problems anymore.
file:// protocol and http:// protocol make things to behave very differently in regards to iframes. I had the same issues you describe with an app on PhoneGap which uses file protocol to access all local files within the local assets/www folder.
If seems that modern browsers prevent the display of "local" files using the file protocol in iframes for security reasons.
We ended up dumping iframes and just using divs as "viewports". Fortunately the overall size of our app was not that big so we managed to load everything in a single page.
I want to use JavaScript to make a simple http get.
I used jQuery to perform my request. My code runs on IE8.0 but not in Chrome (ver 6.0).
My page has the following code: (to simplify, i made a simple request to a html page, but my needs is other)
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<script type"text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<SCRIPT TYPE="text/javascript" >
function sendGet(){
$.get(
"http://www.google.pt",
function(data) {
alert('page content: ' + data);
});
}
</SCRIPT>
<head>
<title> Http Get Demonstration </title>
</head>
<body>
<p/>
<input type="button" value="Http Get" onclick="sendGet();" />
</body>
</html>
As i said, when i load this page on IE and press the button, i get the alert with the html code. But in Chrome the alert appears with empty text (null?). In Chrome Console from "Developer tools" i get the message: "XMLHttpRequest cannot load http://www.google.pt/. Origin null is not allowed by Access-Control-Allow-Origin."
Anyone can explain me what's the meaning of this message? And what i should change to my page run in Chrome?
Thanks
Due to same origin policy you cannot send AJAX requests to different domains than the one hosting your page. So unless your page is hosted on http://google.pt you cannot send an AJAX request to this domain. One possible workaround is to setup a server side script on your domain which will act as bridge between google.pt and the client or use JSONP if the distant domain supports it.
Although i can't remember if i changed any IE option, the Darin Dimitrov seems explain my problem.
I found some tricks can be used (beyond the Dimitrov answer):
use a PHP script:
http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html
configure IE by editing regedit (not recomended):
http://msdn.microsoft.com/en-us/library/dd565656(VS.85).aspx
(I belive there's some other way to disable cross domain protection without editing regedit. But i couldn't find it)
Are you opening the html file directly from a file (e.g. does the address bar say file://usr/path/to/the/file)?
We've found chrome won't let you 'ajax' in files from other domains when running under file://. However, in Safari it works fine.
Best solution for us is to use something like MAMP to run a local Apache server.