Setting data attribute for object element in html

Question

i have an object element in my html body to show an Active reports which exports to a .pdf file. I need to use javascript to automatically print the pdf out to the client's default printer and then save the pdf to the server:

<script language="javascript" type="text/javascript">
        // <!CDATA[
        function PrintPDF() {
            pdf.click();
            pdf.setActive();
            pdf.focus();
            pdf.PrintAll();
         }
        // ]]>

....

<body onload="return PrintPDF();">
 <form id="form1" runat="server">
     <object  id="pdfDoc" type="application/pdf" width="100%" height="100%"  data="test.aspx?PrintReport=yes&SavePDF=yes"/>
    </form>
</body>

With the data hard-code in the object tag, everything run without a problem.

The problem now is that I need to pass querystring to this page dynamically. I tried to set the attribute data in the javsacript to pass the querystring. The querystring value passed successfully, but the data attribute does not seem to be set. I get a blank page.

pdf.setAttribute("data","test.aspx?PrintReport=yes&SavePDF=yes&AccNum="+AccNum);

Does anyone have a clue how I can set the data attribute dynamically to pass in querystring?

Thanks,

score 0 · Answer 1 · answered May 18 '12 at 21:28

0

 var pdfObj = document.getElementById('pdfDoc');
 pdfObj.data="test.aspx?PrintReport=yes&SavePDF=yes&AccNum="+AccNum;

answered May 18 '12 at 21:28

Rob Sedgwick

5,216
4
20
36

i tried this method. it gave me the same result as i useed pdf.setAttribute... meaning it just gives me a blank page without the data being set.... – user1298608 May 21 '12 at 21:09

score 0 · Answer 2 · answered May 18 '12 at 21:46

0

As far as the data attribute you're doing everything fine. Here are some examples: http://jsfiddle.net/3SxRu/

I think your problem might be more to do with the order of execution. What does your actual code look like? Are you writing over the body onLoad function or something?

Also, I assume using the data attribute is a requirement. HTML5 defines data-*. This attribute isn't really valid. Again, maybe your system requires it.

answered May 18 '12 at 21:46

Jamund Ferguson

16,721
3
42
50

Thanks for the response. What I have is actually aspx. On the vb end of the code when the page is loaded, i will call my code to load the active report and export to show the pdf in the object element. Then, once the pdf is loaded in my object element the pdf is printed out using the javascript. Everything works well when i hardcode the parameters' values on the vb code end. However, Once I setup to use the querystring to retrieve the value of the parameters. The data attribute failed to be set. – user1298608 May 21 '12 at 21:13

score 0 · Answer 3 · answered Sep 13 '12 at 05:24

I suspect that things are happening out of order. Try waiting until the onload event of the window before adding the embed.

Also, I suggest using a script like PDFObject to handle the embedding since it is a reliable way to embed PDF across all the various browsers out there. For example you might have something like the following:

<html>
  <head>
    <title>PDFObject example</title>
    <script type="text/javascript" src="pdfobject.js"></script>
    <script type="text/javascript">
      window.onload = function (){
        // First build the link to the PDF raw data ("bits")
        //   getQueryStrings assumes something like http://stackoverflow.com/questions/2907482/how-to-get-the-query-string-by-javascript
        var queryStrings = getQueryStrings();
        var reportNameParamValue = queryStrings["reportName"];
        var pdfBitsUrl = "getReportPdfBits.aspx?reportName=" + reportNameParamValue;

        // just in case PDF cannot be embedded, we'll fix the fallback link below:
        var pdfFallbackLink = document.getElementById("pdfFallbackAnchor");
        pdfFallbackLink.href = pdfFallbackLink;

        // now perform the actual embed using PDFObject script from http://pdfobject.com
        var success = new PDFObject( { 
          url: pdfBitsUrl;
        }).embed();
      };
    </script>
  </head> 
  <body>
    <p>It appears you don't have Adobe Reader or PDF support in this web
    browser. <a id="pdfFallbackAnchor" href="sample.pdf">Click here to download the PDF</a></p>
  </body>

Setting data attribute for object element in html

3 Answers3