Jquery + dom-to-image 无损打印页面内容、保留页面样式

1. 装插件
   jquery：yarn add jquery
   dom-to-image：yarn add dom-to-image

2. 把jQuery.print.js 依赖包放到项目里

import $ from 'jquery';

function getjQueryObject(string) {
  // Make string a vaild jQuery thing
  let jqObj = $("");
  try {
    jqObj = $(string)
      .clone();
  } catch (e) {
    jqObj = $("<span />")
      .html(string);
  }
  return jqObj;
}

function printFrame(frameWindow, content, options) {
  // Print the selected window/iframe
  let def = $.Deferred();
  try {
    frameWindow = frameWindow.contentWindow || frameWindow.contentDocument || frameWindow;
    let wdoc = frameWindow.document || frameWindow.contentDocument || frameWindow;
    if(options.doctype) {
      wdoc.write(options.doctype);
    }
    wdoc.write(content);
    wdoc.close();
    let printed = false;
    let callPrint = function () {
      if(printed) {
        return;
      }
      // Fix for IE : Allow it to render the iframe
      frameWindow.focus();
      try {
        // Fix for IE11 - printng the whole page instead of the iframe content
        if (!frameWindow.document.execCommand('print', false, null)) {
          // document.execCommand returns false if it failed -http://stackoverflow.com/a/21336448/937891
          frameWindow.print();
        }
        // focus body as it is losing focus in iPad and content not getting printed
        $('body').focus();
      } catch (e) {
        frameWindow.print();
      }
      frameWindow.close();
      printed = true;
      def.resolve();
    }
    // Print once the frame window loads - seems to work for the new-window option but unreliable for the iframe
    $(frameWindow).on("load", callPrint);
    // Fallback to printing directly if the frame doesn't fire the load event for whatever reason
    setTimeout(callPrint, options.timeout);
  } catch (err) {
    def.reject(err);
  }
  return def;
}

function printContentInIFrame(content, options) {
  let $iframe = $(`${options.iframe  }`);
  let iframeCount = $iframe.length;
  if (iframeCount === 0) {
    // Create a new iFrame if none is given
    $iframe = $('<iframe height="0" width="0" border="0" wmode="Opaque"/>')
      .prependTo('body')
      .css({
        position: "absolute",
        top: -999,
        left: -999
      });
  }
  let frameWindow = $iframe.get(0);
  return printFrame(frameWindow, content, options)
    .done(() => {
      // Success
      setTimeout(() => {
        // Wait for IE
        if (iframeCount === 0) {
          // Destroy the iframe if created here
          $iframe.remove();
        }
      }, 1000);
    })
    .fail((err) => {
      // Use the pop-up method if iframe fails for some reason
      console.error("Failed to print from iframe", err);
      printContentInNewWindow(content, options);
    })
    .always(() => {
      try {
        options.deferred.resolve();
      } catch (err) {
        console.warn('Error notifying deferred', err);
      }
    });
}

function printContentInNewWindow(content, options) {
  // Open a new window and print selected content
  let frameWindow = window.open();
  return printFrame(frameWindow, content, options)
    .always(() => {
      try {
        options.deferred.resolve();
      } catch (err) {
        console.warn('Error notifying deferred', err);
      }
    });
}

function isNode(o) {
  /* http://stackoverflow.com/a/384380/937891 */
  return !!(typeof Node === "object" ? o instanceof Node : o && typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName === "string");
}
$.print = $.fn.print = function () {
  // Print a given set of elements
  let options, $this, self = this;
  // console.log("Printing", this, arguments);
  if (self instanceof $) {
    // Get the node if it is a jQuery object
    self = self.get(0);
  }
  if (isNode(self)) {
    // If `this` is a HTML element, i.e. for
    // $(selector).print()
    $this = $(self);
    if (arguments.length > 0) {
      options = arguments[0];
    }
  } else if (arguments.length > 0) {
      // $.print(selector,options)
      $this = $(arguments[0]);
      if (isNode($this[0])) {
        if (arguments.length > 1) {
          options = arguments[1];
        }
      } else {
        // $.print(options)
        options = arguments[0];
        $this = $("html");
      }
    } else {
      // $.print()
      $this = $("html");
    }
  // Default options
  let defaults = {
    globalStyles: true,
    mediaPrint: false,
    stylesheet: null,
    noPrintSelector: ".no-print",
    iframe: true,
    append: null,
    prepend: null,
    manuallyCopyFormValues: true,
    deferred: $.Deferred(),
    timeout: 750,
    title: null,
    doctype: '<!doctype html>'
  };
  // Merge with user-options
  options = $.extend({}, defaults, (options || {}));
  let $styles = $("");
  if (options.globalStyles) {
    // Apply the stlyes from the current sheet to the printed page
    $styles = $("style, link, meta, base, title");
  } else if (options.mediaPrint) {
    // Apply the media-print stylesheet
    $styles = $("link[media=print]");
  }
  if (options.stylesheet) {
    // Add a custom stylesheet if given
    $styles = $.merge($styles, $(`<link rel="stylesheet" href="${  options.stylesheet  }">`));
  }
  // Create a copy of the element to print
  let copy = $this.clone();
  // Wrap it in a span to get the HTML markup string
  copy = $("<span/>")
    .append(copy);
  // Remove unwanted elements
  copy.find(options.noPrintSelector)
    .remove();
  // Add in the styles
  copy.append($styles.clone());
  // Update title
  if (options.title) {
    let title = $("title", copy);
    if (title.length === 0) {
      title = $("<title />");
      copy.append(title);
    }
    title.text(options.title);
  }
  // Appedned content
  copy.append(getjQueryObject(options.append));
  // Prepended content
  copy.prepend(getjQueryObject(options.prepend));
  if (options.manuallyCopyFormValues) {
    // Manually copy form values into the HTML for printing user-modified input fields
    // http://stackoverflow.com/a/26707753
    copy.find("input")
      .each(function () {
        let $field = $(this);
        if ($field.is("[type='radio']") || $field.is("[type='checkbox']")) {
          if ($field.prop("checked")) {
            $field.attr("checked", "checked");
          }
        } else {
          $field.attr("value", $field.val());
        }
      });
    copy.find("select").each(function () {
      let $field = $(this);
      $field.find(":selected").attr("selected", "selected");
    });
    copy.find("textarea").each(function () {
      // Fix for https://github.com/DoersGuild/jQuery.print/issues/18#issuecomment-96451589
      let $field = $(this);
      $field.text($field.val());
    });
  }
  // Get the HTML markup string
  let content = copy.html();
  // Notify with generated markup & cloned elements - useful for logging, etc
  try {
    options.deferred.notify('generated_markup', content, copy);
  } catch (err) {
    console.warn('Error notifying deferred', err);
  }
  // Destroy the copy
  copy.remove();
  if (options.iframe) {
    // Use an iframe for printing
    try {
      printContentInIFrame(content, options);
    } catch (e) {
      // Use the pop-up method if iframe fails for some reason
      console.error("Failed to print from iframe", e.stack, e.message);
      printContentInNewWindow(content, options);
    }
  } else {
    // Use a new window for printing
    printContentInNewWindow(content, options);
  }
  return this;
};

3. 页面上使用

import { h } from 'preact';
import { Button } from 'antd';
import { useEffect, useState } from "preact/hooks";
import $ from 'jquery';
import './jQuery.print';
import domtoimage from 'dom-to-image';

const Printer = () => {
	const [imgUrl, setImgUrl] = useState('');
	
	useEffect(() => {
		imgUrl && $('#printImg').print()
	}, [imgUrl]);

	const JQ_Print = () => {
		const DOM = document.querySelector('#printContent');

		// JPEG和PNG都是有损图片，SVG和原图一样清晰
		domtoimage.toSvg(DOM).then((dataUrl) => {
			setImgUrl(dataUrl);
		});
	}
	
	return (
		<div>
			<Button type="primary" onClick={JQ_Print}>
				打印预览
			</Button>

			<div>
				<div id="printContent">
					{/* 登记表 */}
					<section>...</section>

					{/* 回执单 */}
					<section>...</section>
				</div>

				<img
					id="printImg"
					style={{ position: 'absolute', left: 0, top: 0, zIndex: -1 }}
					src={imgUrl}
					alt="用于打印的图片"
				/>
			</div>
		</div>
	)
}

export default Printer;