Screenshot transferred to the background

Send a screenshot of a part of the page to the back end

Detailed description of requirements

You need to put the histogram displayed on the page （ Or some preset area on other graphics or pages ） Take a screenshot and send it to the back end , The back end puts the pictures passed in from the front end into excel in , Automatic page download excel.

Realization

// Export pictures 
handleExport() {
    
    // Generate url
    const canvas = document.createElement("canvas");// Create a canvas 
    let canvasBox = document.getElementById("export-region");// according to id Get what you want to intercept dom
    const width = canvasBox.offsetWidth;
    const height = canvasBox.offsetHeight;
    canvas.width = width;
    canvas.height = height;// Set the canvas to dom The width and height of 
    //  When the generated page is vague , It can be amplified by a certain multiple , Through adjustment canvas The width and height of make it less clear 
    const context = canvas.getContext("2d");
    context.scale(1, 1);
    const options = {
    
          backgroundColor: null,
          canvas: canvas,
          useCORS: true
          };
     html2canvas(canvasBox, options).then(canvas => {
    
          let imgUrl = canvas.toDataURL("image/png");
          // take base64 The file is converted to blob
          let blob = dataURLtoBlob(imgUrl); // dataURL-> blob
          let file = blobToFile(blob, " Screenshot .png"); // blob -> file
          // Organizational parameters 
          let formData = new FormData();
          // Add the binary file to formData in 
          formData.append("PictrueFile", file, " Screenshot .png");
          exportPicture(formData).then(res => {
    
          // above PictureFile The parameter name defined for the backend ,exportPicture To call the function of the back-end interface , It needs to be modified according to the actual situation 
               let resBlob = new Blob([res.data], {
     type: "application/x-xlsx" });
               let fileUrl = window.URL.createObjectURL(resBlob);
               let link = document.createElement("a");
               link.href = fileUrl;
               link.setAttribute(
                     "download",
                     " Data and picture export _" + formatDate(+new Date(), "YYYY_MM_DD") + ".xlsx"
                     );//excel name ‘ Customize + current time ’
                      link.click();
               });
         });
 },

// The two functions used  dataURLtoBlob blobToFile

/** *  take base64 Convert to blob */
function dataURLtoBlob(dataUrl){
    
  var arr = dataUrl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {
    
    type: mime
  });

}

/** *  take blob Convert to file */
export const blobToFile = (theBlob, fileName) => {
    
  theBlob.lastModifiedDate = new Date();
  theBlob.name = fileName;
  return theBlob;
}