打印源码封装及调用

// {
//   /** Class to pass to the print window body */
//   bodyClass?: string;
//   /** Content to be printed */
//   content: Function;
//   /** Copy styles over into print window. default: true */
//   copyStyles?: boolean;
//   /** Set the title for printing when saving as a file */
//   documentTitle?: string;
//   /** */
//   fonts?: { family: string, source: string }[];
//   /** Callback function to trigger after print */
//   onAfterPrint?: () => void;
//   /** Callback function to trigger before page content is retrieved for printing */
//   onBeforeGetContent?: () => void | Promise<any>;
//   /** Callback function to trigger before print */
//   onBeforePrint?: () => void | Promise<any>;
//   /** Callback function to listen for printing errors */
//   onPrintError?: (errorLocation: "onBeforeGetContent" | "onBeforePrint" | "print", error: Error) => void;
//   /** Override default print window styling */
//   pageStyle?: string | Function<string>;
//   /** Override the default `window.print` method that is used for printing */
//   print?: (target: HTMLIFrameElement) => Promise<any>;
//   /** Remove the iframe after printing. */
//   removeAfterPrint?: boolean;
//   /** Suppress error messages */
//   suppressErrors?: boolean;
//   /** Set the nonce attribute for whitelisting script and style -elements for CSP (content security policy) */
//   nonce?: string;
// }

const defaultProps = {
  copyStyles: true,
  pageStyle: `
      @page {
          /* Remove browser default header (title) and footer (url) */
          margin: 0;
      }
      @media print {
          body {
              /* Tell browsers to print background colors */
              -webkit-print-color-adjust: exact; /* Chrome/Safari/Edge/Opera */
              color-adjust: exact; /* Firefox */
          }
      }
  `,
  removeAfterPrint: false,
  suppressErrors: false,
}

class VueToPrint {
  constructor (props = {}) {
    this.props = Object.assign(defaultProps, props)
  }

  startPrint (target) {
    const {
      onAfterPrint,
      onPrintError,
      print,
      documentTitle,
    } = this.props

    setTimeout(() => {
      if (target.contentWindow) {
        target.contentWindow.focus() // Needed for IE 11

        if (print) {
          print(target)
            .then(this.handleRemoveIframe)
            .catch((error) => {
              if (onPrintError) {
                onPrintError('print', error)
              } else {
                this.logMessages(['An error was thrown by the specified `print` function'])
              }
            })
        } else if (target.contentWindow.print) {
          const tempContentDocumentTitle = target.contentDocument?.title ?? ''
          const tempOwnerDocumentTitle = target.ownerDocument.title

          // Override page and various target content titles during print
          // NOTE: some browsers seem to take the print title from the highest level
          // title, while others take it from the lowest level title. So, we set the title
          // in a few places and hope the current browser takes one of them :pray:
          if (documentTitle) {
            // Print filename in Chrome
            target.ownerDocument.title = documentTitle

            // Print filename in Firefox, Safari
            if (target.contentDocument) {
              target.contentDocument.title = documentTitle
            }
          }

          target.contentWindow.print()

          // Restore the page's original title information
          if (documentTitle) {
            target.ownerDocument.title = tempOwnerDocumentTitle

            if (target.contentDocument) {
              target.contentDocument.title = tempContentDocumentTitle
            }
          }
        } else {
          // Some browsers, such as Firefox Android, do not support printing at all
          // https://developer.mozilla.org/en-US/docs/Web/API/Window/print
          this.logMessages(['Printing for this browser is not currently possible: the browser does not have a `print` method available for iframes.'])
        }

        if (onAfterPrint) {
          onAfterPrint()
        }

        this.handleRemoveIframe()
      } else {
        this.logMessages(['Printing failed because the `contentWindow` of the print iframe did not load. This is possibly an error with `react-to-print&