How to access document.body from a script inside of document.write

Question

Help. I am working on an application which downloads a report from an API which gives me HTML as part of the JSON return. Because it returns JSON I cannot simply open this in a new window.

In this script I am injecting this code:

          let tmp = result.data;
          let spot = tmp.indexOf('</body>');
          let insert = `<div style="position:fixed; top:200px;left:20px; width:200px;font-size:15pt">
         

          <div class="camera">
            <video id="video" style='display:hidden'>Video stream not available.</video>
            <button  onClick='takepicture()'>Take photo</button> 
          </div>
          <canvas id="canvas" style='display:none;'></canvas>
        <!--<button onClick='genPDF()'>PDF</button>-->
          Press CTRL+S to save page as HTML
          <img id="testDownloadImage" src='' width=600 height=400 />
          </div>
          
          <script type='text/javascript'>
alert(document.body.innerHtml)
          // function clearphoto() {
          //     var context = canvas.getContext('2d');
          //     context.fillStyle = "#AAA";
          //     context.fillRect(0, 0, canvas.width, canvas.height);

          //     var data = canvas.toDataURL('image/png');
          //     // photo.setAttribute('src', data);
          //   }
            
            // Capture a photo by fetching the current contents of the video
            // and drawing it into a canvas, then converting that to a PNG
            // format data URL. By drawing it on an offscreen canvas and then
            // drawing that to the screen, we can change its size and/or apply
            // other changes before drawing it.

            async function takepicture() {
              let video = document.getElementById('video');
              let canvas = document.getElementById('canvas');

              let displayMediaOptions={video: true,displaySurface:'browser', logicalSurface:true, cursor:'never', audio: false};
              try{
                video.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
                // video.play();
                var context = canvas.getContext('2d');
                width=window.innerWidth;
                height=window.scrollHeight;
                if (width && height) {
                  canvas.width = width;
                  canvas.height = height;
                  context.drawImage(video, 0, 0, width, height);
                
                  var data = canvas.toDataURL('image/jpg'); //.replace(/^data:image\/(png|jpg);base64,/, "");
                  // photo.setAttribute('src', data);
                  document.getElementById('testDownloadImage').src=data;
                  // location.href=data;
                } else {
                  // clearphoto();
                }
              }
              catch(err) {
                console.log("An error occurred: " + err);
              }
              finally{
              let tracks = video.srcObject.getTracks();
              tracks.forEach(track => track.stop());
              video.srcObject = null;
              }
            }
        </script>
          `
          let newStr = [tmp.slice(0, spot), insert, tmp.slice(spot)].join('');
          document.write(newStr);

to allow me to add a print screen option so that the report can be imaged. I have tried other utilities to save the HTML as a PDF or even saving the page but because the report uses a lot of XSLT and scripting to display the results these methods fail, leaving me with the print screen as the only option.

WebRTC handles this aptly, with one minor difficult: Because I am using document.write I am unable to find the document.body even though the code I am passed is a properly formed page ( etc).

How can I use the inserted script to display the page and capture it as an image?

Thanks

Answer 1

This is not a genuine answer sadly but I resolved the problem by moving the entire write to an iFrame with the script on the outside. I then got the scrollHeight of the iFrame document and resized the frame to match that, effectively making it appear as if the document occupied the entire page. This way I can place my script outside the iFrame and still use it to capture the entire page, which is what I was shooting for.

Thank you for any comments. As of now this is no longer needed.