react-to-print
Advanced tools
Comparing version 2.14.10 to 2.14.11
@@ -10,7 +10,7 @@ import * as React from "react"; | ||
} | ||
declare type Font = { | ||
type Font = { | ||
family: string; | ||
source: string; | ||
}; | ||
declare type PropertyFunction<T> = () => T; | ||
type PropertyFunction<T> = () => T; | ||
export interface IReactToPrintProps { | ||
@@ -35,7 +35,5 @@ bodyClass?: string; | ||
export default class ReactToPrint extends React.Component<IReactToPrintProps> { | ||
private linkTotal; | ||
private linksLoaded; | ||
private linksErrored; | ||
private fontsLoaded; | ||
private fontsErrored; | ||
private numResourcesToLoad; | ||
private resourcesLoaded; | ||
private resourcesErrored; | ||
static defaultProps: { | ||
@@ -51,8 +49,8 @@ copyStyles: boolean; | ||
handlePrint: () => void; | ||
handleRemoveIframe: (force?: boolean | undefined) => void; | ||
handleRemoveIframe: (force?: boolean) => void; | ||
logMessages: (messages: unknown[], level?: 'error' | 'warning' | 'debug') => void; | ||
render(): JSX.Element | null; | ||
} | ||
declare type UseReactToPrintHookReturn = () => void; | ||
type UseReactToPrintHookReturn = () => void; | ||
export declare const useReactToPrint: (props: IReactToPrintProps) => UseReactToPrintHookReturn; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define("lib",["react","react-dom"],t):"object"==typeof exports?exports.lib=t(require("react"),require("react-dom")):e.lib=t(e.react,e["react-dom"])}("undefined"!=typeof self?self:this,(function(e,t){return function(){"use strict";var n={655:function(e,t,n){n.r(t),n.d(t,{__extends:function(){return o},__assign:function(){return i},__rest:function(){return a},__decorate:function(){return l},__param:function(){return c},__metadata:function(){return u},__awaiter:function(){return s},__generator:function(){return f},__createBinding:function(){return d},__exportStar:function(){return p},__values:function(){return h},__read:function(){return y},__spread:function(){return b},__spreadArrays:function(){return g},__spreadArray:function(){return m},__await:function(){return v},__asyncGenerator:function(){return w},__asyncDelegator:function(){return _},__asyncValues:function(){return P},__makeTemplateObject:function(){return O},__importStar:function(){return x},__importDefault:function(){return E},__classPrivateFieldGet:function(){return T},__classPrivateFieldSet:function(){return j},__classPrivateFieldIn:function(){return A}});var r=function(e,t){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},r(e,t)};function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var i=function(){return i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},i.apply(this,arguments)};function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n}function l(e,t,n,r){var o,i=arguments.length,a=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,r);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}function c(e,t){return function(n,r){t(n,r,e)}}function u(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function s(e,t,n,r){return new(n||(n=Promise))((function(o,i){function a(e){try{c(r.next(e))}catch(e){i(e)}}function l(e){try{c(r.throw(e))}catch(e){i(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,l)}c((r=r.apply(e,t||[])).next())}))}function f(e,t){var n,r,o,i,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function l(l){return function(c){return function(l){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,l[0]&&(a=0)),a;)try{if(n=1,r&&(o=2&l[0]?r.return:l[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,l[1])).done)return o;switch(r=0,o&&(l=[2&l[0],o.value]),l[0]){case 0:case 1:o=l;break;case 4:return a.label++,{value:l[1],done:!1};case 5:a.label++,r=l[1],l=[0];continue;case 7:l=a.ops.pop(),a.trys.pop();continue;default:if(!((o=(o=a.trys).length>0&&o[o.length-1])||6!==l[0]&&2!==l[0])){a=0;continue}if(3===l[0]&&(!o||l[1]>o[0]&&l[1]<o[3])){a.label=l[1];break}if(6===l[0]&&a.label<o[1]){a.label=o[1],o=l;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(l);break}o[2]&&a.ops.pop(),a.trys.pop();continue}l=t.call(e,a)}catch(e){l=[6,e],r=0}finally{n=o=0}if(5&l[0])throw l[1];return{value:l[0]?l[1]:void 0,done:!0}}([l,c])}}}var d=Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]};function p(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||d(t,e,n)}function h(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function y(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,o,i=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(r=i.next()).done;)a.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(o)throw o.error}}return a}function b(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(y(arguments[t]));return e}function g(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),o=0;for(t=0;t<n;t++)for(var i=arguments[t],a=0,l=i.length;a<l;a++,o++)r[o]=i[a];return r}function m(e,t,n){if(n||2===arguments.length)for(var r,o=0,i=t.length;o<i;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||Array.prototype.slice.call(t))}function v(e){return this instanceof v?(this.v=e,this):new v(e)}function w(e,t,n){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var r,o=n.apply(e,t||[]),i=[];return r={},a("next"),a("throw"),a("return"),r[Symbol.asyncIterator]=function(){return this},r;function a(e){o[e]&&(r[e]=function(t){return new Promise((function(n,r){i.push([e,t,n,r])>1||l(e,t)}))})}function l(e,t){try{(n=o[e](t)).value instanceof v?Promise.resolve(n.value.v).then(c,u):s(i[0][2],n)}catch(e){s(i[0][3],e)}var n}function c(e){l("next",e)}function u(e){l("throw",e)}function s(e,t){e(t),i.shift(),i.length&&l(i[0][0],i[0][1])}}function _(e){var t,n;return t={},r("next"),r("throw",(function(e){throw e})),r("return"),t[Symbol.iterator]=function(){return this},t;function r(r,o){t[r]=e[r]?function(t){return(n=!n)?{value:v(e[r](t)),done:"return"===r}:o?o(t):t}:o}}function P(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,n=e[Symbol.asyncIterator];return n?n.call(e):(e=h(e),t={},r("next"),r("throw"),r("return"),t[Symbol.asyncIterator]=function(){return this},t);function r(n){t[n]=e[n]&&function(t){return new Promise((function(r,o){!function(e,t,n,r){Promise.resolve(r).then((function(t){e({value:t,done:n})}),t)}(r,o,(t=e[n](t)).done,t.value)}))}}}function O(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var S=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function x(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&d(t,e,n);return S(t,e),t}function E(e){return e&&e.__esModule?e:{default:e}}function T(e,t,n,r){if("a"===n&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?r:"a"===n?r.call(e):r?r.value:t.get(e)}function j(e,t,n,r,o){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===r?o.call(e,n):o?o.value=n:t.set(e,n),n}function A(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}},156:function(t){t.exports=e},111:function(e){e.exports=t}},r={};function o(e){var t=r[e];if(void 0!==t)return t.exports;var i=r[e]={exports:{}};return n[e](i,i.exports,o),i.exports}o.d=function(e,t){for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return function(){var e=i;Object.defineProperty(e,"__esModule",{value:!0}),e.useReactToPrint=e.PrintContextConsumer=void 0;var t=o(655),n=o(156),r=o(111),a=Object.prototype.hasOwnProperty.call(n,"createContext"),l=Object.prototype.hasOwnProperty.call(n,"useMemo")&&Object.prototype.hasOwnProperty.call(n,"useCallback"),c=a?n.createContext({}):null;e.PrintContextConsumer=c?c.Consumer:function(){return null};var u={copyStyles:!0,pageStyle:"@page { size: auto; margin: 0mm; } @media print { body { -webkit-print-color-adjust: exact; } }",removeAfterPrint:!1,suppressErrors:!1},s=function(e){function o(){var n=null!==e&&e.apply(this,arguments)||this;return n.startPrint=function(e){var t=n.props,r=t.onAfterPrint,o=t.onPrintError,i=t.print,a=t.documentTitle;setTimeout((function(){var t,l;if(e.contentWindow){if(e.contentWindow.focus(),i)i(e).then(n.handleRemoveIframe).catch((function(e){o?o("print",e):n.logMessages(["An error was thrown by the specified `print` function"])}));else if(e.contentWindow.print){var c=null!==(l=null===(t=e.contentDocument)||void 0===t?void 0:t.title)&&void 0!==l?l:"",u=e.ownerDocument.title;a&&(e.ownerDocument.title=a,e.contentDocument&&(e.contentDocument.title=a)),e.contentWindow.print(),a&&(e.ownerDocument.title=u,e.contentDocument&&(e.contentDocument.title=c))}else n.logMessages(["Printing for this browser is not currently possible: the browser does not have a `print` method available for iframes."]);r&&r(),n.handleRemoveIframe()}else n.logMessages(["Printing failed because the `contentWindow` of the print iframe did not load. This is possibly an error with `react-to-print`. Please file an issue: https://github.com/gregnb/react-to-print/issues/"])}),500)},n.triggerPrint=function(e){var t=n.props,r=t.onBeforePrint,o=t.onPrintError;if(r){var i=r();i&&"function"==typeof i.then?i.then((function(){n.startPrint(e)})).catch((function(e){o&&o("onBeforePrint",e)})):n.startPrint(e)}else n.startPrint(e)},n.handleClick=function(){var e=n.props,t=e.onBeforeGetContent,r=e.onPrintError;if(t){var o=t();o&&"function"==typeof o.then?o.then(n.handlePrint).catch((function(e){r&&r("onBeforeGetContent",e)})):n.handlePrint()}else n.handlePrint()},n.handlePrint=function(){var e=n.props,o=e.bodyClass,i=e.content,a=e.copyStyles,l=e.fonts,c=e.pageStyle,u=e.nonce,s=i();if(void 0!==s)if(null!==s){var f=document.createElement("iframe");f.width="".concat(document.documentElement.clientWidth,"px"),f.height="".concat(document.documentElement.clientHeight,"px"),f.style.position="absolute",f.style.top="-".concat(document.documentElement.clientHeight+100,"px"),f.style.left="-".concat(document.documentElement.clientWidth+100,"px"),f.id="printWindow",f.srcdoc="<!DOCTYPE html>";var d=(0,r.findDOMNode)(s);if(d){var p=d.cloneNode(!0),h=p instanceof Text,y=document.querySelectorAll("link[rel='stylesheet']"),b=h?[]:p.querySelectorAll("img"),g=h?[]:p.querySelectorAll("video");n.linkTotal=y.length+b.length+g.length,n.linksLoaded=[],n.linksErrored=[],n.fontsLoaded=[],n.fontsErrored=[];var m=function(e,t){t?n.linksLoaded.push(e):(n.logMessages(['"react-to-print" was unable to load a linked node. It may be invalid. "react-to-print" will continue attempting to print the page. The linked node that errored was:',e]),n.linksErrored.push(e)),n.linksLoaded.length+n.linksErrored.length+n.fontsLoaded.length+n.fontsErrored.length===n.linkTotal&&n.triggerPrint(f)};f.onload=function(){var e,r,i,s;f.onload=null;var y=f.contentDocument||(null===(r=f.contentWindow)||void 0===r?void 0:r.document);if(y){y.body.appendChild(p),l&&((null===(i=f.contentDocument)||void 0===i?void 0:i.fonts)&&(null===(s=f.contentWindow)||void 0===s?void 0:s.FontFace)?l.forEach((function(e){var t=new FontFace(e.family,e.source);f.contentDocument.fonts.add(t),t.loaded.then((function(e){n.fontsLoaded.push(e)})).catch((function(e){n.fontsErrored.push(t),n.logMessages(['"react-to-print" was unable to load a font. "react-to-print" will continue attempting to print the page. The font that failed to load is:',t,"The error from loading the font is:",e])}))})):n.logMessages(['"react-to-print" is not able to load custom fonts because the browser does not support the FontFace API']));var v="function"==typeof c?c():c;if("string"!=typeof v)n.logMessages(['"react-to-print" expected a "string" from `pageStyle` but received "'.concat(typeof v,'". Styles from `pageStyle` will not be applied.')]);else{var w=y.createElement("style");u&&(w.setAttribute("nonce",u),y.head.setAttribute("nonce",u)),w.appendChild(y.createTextNode(v)),y.head.appendChild(w)}if(o&&(e=y.body.classList).add.apply(e,(0,t.__spreadArray)([],(0,t.__read)(o.split(" ")),!1)),!h){for(var _=h?[]:d.querySelectorAll("canvas"),P=y.querySelectorAll("canvas"),O=0;O<_.length;++O){var S=_[O],x=P[O].getContext("2d");x&&x.drawImage(S,0,0)}for(O=0;O<b.length;O++){var E=b[O],T=E.getAttribute("src");T?((A=new Image).onload=m.bind(null,E,!0),A.onerror=m.bind(null,E,!1),A.src=T):(n.logMessages(['"react-to-print" encountered an <img> tag with an empty "src" attribute. It will not attempt to pre-load it. The <img> is:',E],"warning"),m(E,!1))}for(O=0;O<g.length;O++){var j=g[O];j.preload="auto";var A,k=j.getAttribute("poster");k?((A=new Image).onload=m.bind(null,j,!0),A.onerror=m.bind(null,j,!1),A.src=k):j.readyState>=2?m(j,!0):(j.onloadeddata=m.bind(null,j,!0),j.onerror=m.bind(null,j,!1),j.onstalled=m.bind(null,j,!1))}var C="input",M=d.querySelectorAll(C),R=y.querySelectorAll(C);for(O=0;O<M.length;O++)R[O].value=M[O].value;var I="input[type=checkbox],input[type=radio]",q=d.querySelectorAll(I),D=y.querySelectorAll(I);for(O=0;O<q.length;O++)D[O].checked=q[O].checked;var W="select",L=d.querySelectorAll(W),F=y.querySelectorAll(W);for(O=0;O<L.length;O++)F[O].value=L[O].value}if(a)for(var N=document.querySelectorAll("style, link[rel='stylesheet']"),B=(O=0,N.length);O<B;++O){var G=N[O];if("style"===G.tagName.toLowerCase()){var H=y.createElement(G.tagName),Y=G.sheet;if(Y){var z="";try{for(var V=Y.cssRules.length,U=0;U<V;++U)"string"==typeof Y.cssRules[U].cssText&&(z+="".concat(Y.cssRules[U].cssText,"\r\n"))}catch(e){n.logMessages(["A stylesheet could not be accessed. This is likely due to the stylesheet having cross-origin imports, and many browsers block script access to cross-origin stylesheets. See https://github.com/gregnb/react-to-print/issues/429 for details. You may be able to load the sheet by both marking the stylesheet with the cross `crossorigin` attribute, and setting the `Access-Control-Allow-Origin` header on the server serving the stylesheet. Alternatively, host the stylesheet on your domain to avoid this issue entirely.",G],"warning")}H.setAttribute("id","react-to-print-".concat(O)),u&&H.setAttribute("nonce",u),H.appendChild(y.createTextNode(z)),y.head.appendChild(H)}}else if(G.getAttribute("href"))if(G.hasAttribute("disabled"))n.logMessages(["`react-to-print` encountered a <link> tag with a `disabled` attribute and will ignore it. Note that the `disabled` attribute is deprecated, and some browsers ignore it. You should stop using it. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-disabled. The <link> is:",G],"warning"),m(G,!0);else{H=y.createElement(G.tagName),U=0;for(var J=G.attributes.length;U<J;++U){var K=G.attributes[U];K&&H.setAttribute(K.nodeName,K.nodeValue||"")}H.onload=m.bind(null,H,!0),H.onerror=m.bind(null,H,!1),u&&H.setAttribute("nonce",u),y.head.appendChild(H)}else n.logMessages(["`react-to-print` encountered a <link> tag with an empty `href` attribute. In addition to being invalid HTML, this can cause problems in many browsers, and so the <link> was not loaded. The <link> is:",G],"warning"),m(G,!0)}}0!==n.linkTotal&&a||n.triggerPrint(f)},n.handleRemoveIframe(!0),document.body.appendChild(f)}else n.logMessages(['"react-to-print" could not locate the DOM node corresponding with the `content` prop'])}else n.logMessages(['There is nothing to print because the "content" prop returned "null". Please ensure "content" is renderable before allowing "react-to-print" to be called.']);else n.logMessages(["To print a functional component ensure it is wrapped with `React.forwardRef`, and ensure the forwarded ref is used. See the README for an example: https://github.com/gregnb/react-to-print#examples"])},n.handleRemoveIframe=function(e){var t=n.props.removeAfterPrint;if(e||t){var r=document.getElementById("printWindow");r&&document.body.removeChild(r)}},n.logMessages=function(e,t){void 0===t&&(t="error"),n.props.suppressErrors||("error"===t?console.error(e):"warning"===t?console.warn(e):"debug"===t&&console.debug(e))},n}return(0,t.__extends)(o,e),o.prototype.render=function(){var e=this.props,t=e.children,r=e.trigger;if(r)return n.cloneElement(r(),{onClick:this.handleClick});if(!c)return this.logMessages(['"react-to-print" requires React ^16.3.0 to be able to use "PrintContext"']),null;var o={handlePrint:this.handleClick};return n.createElement(c.Provider,{value:o},t)},o.defaultProps=u,o}(n.Component);e.default=s,e.useReactToPrint=function(e){if(!l)return e.suppressErrors||console.error('"react-to-print" requires React ^16.8.0 to be able to use "useReactToPrint"'),function(){throw new Error('"react-to-print" requires React ^16.8.0 to be able to use "useReactToPrint"')};var r=n.useMemo((function(){return new s((0,t.__assign)((0,t.__assign)({},u),e))}),[e]);return n.useCallback((function(){return r.handleClick()}),[r])}}(),i}()})); | ||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define("lib",["react","react-dom"],t):"object"==typeof exports?exports.lib=t(require("react"),require("react-dom")):e.lib=t(e.react,e["react-dom"])}("undefined"!=typeof self?self:this,(function(e,t){return function(){"use strict";var n={655:function(e,t,n){n.r(t),n.d(t,{__assign:function(){return i},__asyncDelegator:function(){return _},__asyncGenerator:function(){return w},__asyncValues:function(){return P},__await:function(){return m},__awaiter:function(){return s},__classPrivateFieldGet:function(){return j},__classPrivateFieldIn:function(){return A},__classPrivateFieldSet:function(){return T},__createBinding:function(){return d},__decorate:function(){return c},__exportStar:function(){return p},__extends:function(){return o},__generator:function(){return f},__importDefault:function(){return E},__importStar:function(){return x},__makeTemplateObject:function(){return O},__metadata:function(){return u},__param:function(){return l},__read:function(){return y},__rest:function(){return a},__spread:function(){return g},__spreadArray:function(){return v},__spreadArrays:function(){return b},__values:function(){return h}});var r=function(e,t){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},r(e,t)};function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var i=function(){return i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},i.apply(this,arguments)};function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n}function c(e,t,n,r){var o,i=arguments.length,a=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,r);else for(var c=e.length-1;c>=0;c--)(o=e[c])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}function l(e,t){return function(n,r){t(n,r,e)}}function u(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function s(e,t,n,r){return new(n||(n=Promise))((function(o,i){function a(e){try{l(r.next(e))}catch(e){i(e)}}function c(e){try{l(r.throw(e))}catch(e){i(e)}}function l(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,c)}l((r=r.apply(e,t||[])).next())}))}function f(e,t){var n,r,o,i,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function c(c){return function(l){return function(c){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,c[0]&&(a=0)),a;)try{if(n=1,r&&(o=2&c[0]?r.return:c[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,c[1])).done)return o;switch(r=0,o&&(c=[2&c[0],o.value]),c[0]){case 0:case 1:o=c;break;case 4:return a.label++,{value:c[1],done:!1};case 5:a.label++,r=c[1],c=[0];continue;case 7:c=a.ops.pop(),a.trys.pop();continue;default:if(!((o=(o=a.trys).length>0&&o[o.length-1])||6!==c[0]&&2!==c[0])){a=0;continue}if(3===c[0]&&(!o||c[1]>o[0]&&c[1]<o[3])){a.label=c[1];break}if(6===c[0]&&a.label<o[1]){a.label=o[1],o=c;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(c);break}o[2]&&a.ops.pop(),a.trys.pop();continue}c=t.call(e,a)}catch(e){c=[6,e],r=0}finally{n=o=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}([c,l])}}}var d=Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]};function p(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||d(t,e,n)}function h(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function y(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,o,i=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(r=i.next()).done;)a.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(o)throw o.error}}return a}function g(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(y(arguments[t]));return e}function b(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),o=0;for(t=0;t<n;t++)for(var i=arguments[t],a=0,c=i.length;a<c;a++,o++)r[o]=i[a];return r}function v(e,t,n){if(n||2===arguments.length)for(var r,o=0,i=t.length;o<i;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||Array.prototype.slice.call(t))}function m(e){return this instanceof m?(this.v=e,this):new m(e)}function w(e,t,n){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var r,o=n.apply(e,t||[]),i=[];return r={},a("next"),a("throw"),a("return"),r[Symbol.asyncIterator]=function(){return this},r;function a(e){o[e]&&(r[e]=function(t){return new Promise((function(n,r){i.push([e,t,n,r])>1||c(e,t)}))})}function c(e,t){try{(n=o[e](t)).value instanceof m?Promise.resolve(n.value.v).then(l,u):s(i[0][2],n)}catch(e){s(i[0][3],e)}var n}function l(e){c("next",e)}function u(e){c("throw",e)}function s(e,t){e(t),i.shift(),i.length&&c(i[0][0],i[0][1])}}function _(e){var t,n;return t={},r("next"),r("throw",(function(e){throw e})),r("return"),t[Symbol.iterator]=function(){return this},t;function r(r,o){t[r]=e[r]?function(t){return(n=!n)?{value:m(e[r](t)),done:"return"===r}:o?o(t):t}:o}}function P(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,n=e[Symbol.asyncIterator];return n?n.call(e):(e=h(e),t={},r("next"),r("throw"),r("return"),t[Symbol.asyncIterator]=function(){return this},t);function r(n){t[n]=e[n]&&function(t){return new Promise((function(r,o){!function(e,t,n,r){Promise.resolve(r).then((function(t){e({value:t,done:n})}),t)}(r,o,(t=e[n](t)).done,t.value)}))}}}function O(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var S=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function x(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&d(t,e,n);return S(t,e),t}function E(e){return e&&e.__esModule?e:{default:e}}function j(e,t,n,r){if("a"===n&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?r:"a"===n?r.call(e):r?r.value:t.get(e)}function T(e,t,n,r,o){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===r?o.call(e,n):o?o.value=n:t.set(e,n),n}function A(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}},156:function(t){t.exports=e},111:function(e){e.exports=t}},r={};function o(e){var t=r[e];if(void 0!==t)return t.exports;var i=r[e]={exports:{}};return n[e](i,i.exports,o),i.exports}o.d=function(e,t){for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return function(){var e=i;Object.defineProperty(e,"__esModule",{value:!0}),e.useReactToPrint=e.PrintContextConsumer=void 0;var t=o(655),n=o(156),r=o(111),a=Object.prototype.hasOwnProperty.call(n,"createContext"),c=Object.prototype.hasOwnProperty.call(n,"useMemo")&&Object.prototype.hasOwnProperty.call(n,"useCallback"),l=a?n.createContext({}):null;e.PrintContextConsumer=l?l.Consumer:function(){return null};var u={copyStyles:!0,pageStyle:"\n @page {\n /* Remove browser default header (title) and footer (url) */\n margin: 0;\n }\n @media print {\n body {\n /* Tell browsers to print background colors */\n -webkit-print-color-adjust: exact; /* Chrome/Safari/Edge/Opera */\n color-adjust: exact; /* Firefox */\n }\n }\n ",removeAfterPrint:!1,suppressErrors:!1},s=function(e){function o(){var n=null!==e&&e.apply(this,arguments)||this;return n.startPrint=function(e){var t=n.props,r=t.onAfterPrint,o=t.onPrintError,i=t.print,a=t.documentTitle;setTimeout((function(){var t,c;if(e.contentWindow){if(e.contentWindow.focus(),i)i(e).then(n.handleRemoveIframe).catch((function(e){o?o("print",e):n.logMessages(["An error was thrown by the specified `print` function"])}));else if(e.contentWindow.print){var l=null!==(c=null===(t=e.contentDocument)||void 0===t?void 0:t.title)&&void 0!==c?c:"",u=e.ownerDocument.title;a&&(e.ownerDocument.title=a,e.contentDocument&&(e.contentDocument.title=a)),e.contentWindow.print(),a&&(e.ownerDocument.title=u,e.contentDocument&&(e.contentDocument.title=l))}else n.logMessages(["Printing for this browser is not currently possible: the browser does not have a `print` method available for iframes."]);r&&r(),n.handleRemoveIframe()}else n.logMessages(["Printing failed because the `contentWindow` of the print iframe did not load. This is possibly an error with `react-to-print`. Please file an issue: https://github.com/gregnb/react-to-print/issues/"])}),500)},n.triggerPrint=function(e){var t=n.props,r=t.onBeforePrint,o=t.onPrintError;if(r){var i=r();i&&"function"==typeof i.then?i.then((function(){n.startPrint(e)})).catch((function(e){o&&o("onBeforePrint",e)})):n.startPrint(e)}else n.startPrint(e)},n.handleClick=function(){var e=n.props,t=e.onBeforeGetContent,r=e.onPrintError;if(t){var o=t();o&&"function"==typeof o.then?o.then(n.handlePrint).catch((function(e){r&&r("onBeforeGetContent",e)})):n.handlePrint()}else n.handlePrint()},n.handlePrint=function(){var e=n.props,o=e.bodyClass,i=e.content,a=e.copyStyles,c=e.fonts,l=e.pageStyle,u=e.nonce,s=i();if(void 0!==s)if(null!==s){var f=document.createElement("iframe");f.width="".concat(document.documentElement.clientWidth,"px"),f.height="".concat(document.documentElement.clientHeight,"px"),f.style.position="absolute",f.style.top="-".concat(document.documentElement.clientHeight+100,"px"),f.style.left="-".concat(document.documentElement.clientWidth+100,"px"),f.id="printWindow",f.srcdoc="<!DOCTYPE html>";var d=(0,r.findDOMNode)(s);if(d){var p=d.cloneNode(!0),h=p instanceof Text,y=document.querySelectorAll("link[rel='stylesheet']"),g=h?[]:p.querySelectorAll("img"),b=h?[]:p.querySelectorAll("video"),v=c?c.length:0;n.numResourcesToLoad=y.length+g.length+b.length+v,n.resourcesLoaded=[],n.resourcesErrored=[];var m=function(e,r){n.resourcesLoaded.includes(e)?n.logMessages(["Tried to mark a resource that has already been handled",e],"debug"):(r?(n.logMessages(t.__spreadArray(['"react-to-print" was unable to load a resource but will continue attempting to print the page'],t.__read(r),!1)),n.resourcesErrored.push(e)):n.resourcesLoaded.push(e),n.resourcesLoaded.length+n.resourcesErrored.length===n.numResourcesToLoad&&n.triggerPrint(f))};f.onload=function(){var e,r,i,s;f.onload=null;var y=f.contentDocument||(null===(r=f.contentWindow)||void 0===r?void 0:r.document);if(y){y.body.appendChild(p),c&&((null===(i=f.contentDocument)||void 0===i?void 0:i.fonts)&&(null===(s=f.contentWindow)||void 0===s?void 0:s.FontFace)?c.forEach((function(e){var t=new FontFace(e.family,e.source);f.contentDocument.fonts.add(t),t.loaded.then((function(){m(t)})).catch((function(e){m(t,["Failed loading the font:",t,"Load error:",e])}))})):(c.forEach((function(e){return m(e)})),n.logMessages(['"react-to-print" is not able to load custom fonts because the browser does not support the FontFace API but will continue attempting to print the page'])));var v="function"==typeof l?l():l;if("string"!=typeof v)n.logMessages(['"react-to-print" expected a "string" from `pageStyle` but received "'.concat(typeof v,'". Styles from `pageStyle` will not be applied.')]);else{var w=y.createElement("style");u&&(w.setAttribute("nonce",u),y.head.setAttribute("nonce",u)),w.appendChild(y.createTextNode(v)),y.head.appendChild(w)}if(o&&(e=y.body.classList).add.apply(e,t.__spreadArray([],t.__read(o.split(" ")),!1)),!h){for(var _=h?[]:d.querySelectorAll("canvas"),P=y.querySelectorAll("canvas"),O=0;O<_.length;++O){var S=_[O],x=P[O].getContext("2d");x&&x.drawImage(S,0,0)}var E=function(e){var t=g[e],n=t.getAttribute("src");if(n){var r=new Image;r.onload=function(){return m(t)},r.onerror=function(e,n,r,o,i){return m(t,["Error loading <img>",t,"Error",i])},r.src=n}else m(t,['Found an <img> tag with an empty "src" attribute. This prevents pre-loading it. The <img> is:',t])};for(O=0;O<g.length;O++)E(O);var j=function(e){var t=b[e];t.preload="auto";var n=t.getAttribute("poster");if(n){var r=new Image;r.onload=function(){return m(t)},r.onerror=function(e,r,o,i,a){return m(t,["Error loading video poster",n,"for video",t,"Error:",a])},r.src=n}else t.readyState>=2?m(t):(t.onloadeddata=function(){return m(t)},t.onerror=function(e,n,r,o,i){return m(t,["Error loading video",t,"Error",i])},t.onstalled=function(){return m(t,["Loading video stalled, skipping",t])})};for(O=0;O<b.length;O++)j(O);var T="input",A=d.querySelectorAll(T),C=y.querySelectorAll(T);for(O=0;O<A.length;O++)C[O].value=A[O].value;var k="input[type=checkbox],input[type=radio]",M=d.querySelectorAll(k),R=y.querySelectorAll(k);for(O=0;O<M.length;O++)R[O].checked=M[O].checked;var q="select",D=d.querySelectorAll(q),I=y.querySelectorAll(q);for(O=0;O<D.length;O++)I[O].value=D[O].value}if(a)for(var F=document.querySelectorAll("style, link[rel='stylesheet']"),L=function(e,t){var r=F[e];if("style"===r.tagName.toLowerCase()){var o=y.createElement(r.tagName),i=r.sheet;if(i){var a="";try{for(var c=i.cssRules.length,l=0;l<c;++l)"string"==typeof i.cssRules[l].cssText&&(a+="".concat(i.cssRules[l].cssText,"\r\n"))}catch(e){n.logMessages(["A stylesheet could not be accessed. This is likely due to the stylesheet having cross-origin imports, and many browsers block script access to cross-origin stylesheets. See https://github.com/gregnb/react-to-print/issues/429 for details. You may be able to load the sheet by both marking the stylesheet with the cross `crossorigin` attribute, and setting the `Access-Control-Allow-Origin` header on the server serving the stylesheet. Alternatively, host the stylesheet on your domain to avoid this issue entirely.",r],"warning")}o.setAttribute("id","react-to-print-".concat(e)),u&&o.setAttribute("nonce",u),o.appendChild(y.createTextNode(a)),y.head.appendChild(o)}}else if(r.getAttribute("href"))if(r.hasAttribute("disabled"))n.logMessages(["`react-to-print` encountered a <link> tag with a `disabled` attribute and will ignore it. Note that the `disabled` attribute is deprecated, and some browsers ignore it. You should stop using it. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-disabled. The <link> is:",r],"warning"),m(r);else{for(var s=y.createElement(r.tagName),f=(l=0,r.attributes.length);l<f;++l){var d=r.attributes[l];d&&s.setAttribute(d.nodeName,d.nodeValue||"")}s.onload=function(){return m(s)},s.onerror=function(e,t,n,r,o){return m(s,["Failed to load",s,"Error:",o])},u&&s.setAttribute("nonce",u),y.head.appendChild(s)}else n.logMessages(["`react-to-print` encountered a <link> tag with an empty `href` attribute. In addition to being invalid HTML, this can cause problems in many browsers, and so the <link> was not loaded. The <link> is:",r],"warning"),m(r)},W=(O=0,F.length);O<W;++O)L(O)}0!==n.numResourcesToLoad&&a||n.triggerPrint(f)},n.handleRemoveIframe(!0),document.body.appendChild(f)}else n.logMessages(['"react-to-print" could not locate the DOM node corresponding with the `content` prop'])}else n.logMessages(['There is nothing to print because the "content" prop returned "null". Please ensure "content" is renderable before allowing "react-to-print" to be called.']);else n.logMessages(["To print a functional component ensure it is wrapped with `React.forwardRef`, and ensure the forwarded ref is used. See the README for an example: https://github.com/gregnb/react-to-print#examples"])},n.handleRemoveIframe=function(e){var t=n.props.removeAfterPrint;if(e||t){var r=document.getElementById("printWindow");r&&document.body.removeChild(r)}},n.logMessages=function(e,t){void 0===t&&(t="error"),n.props.suppressErrors||("error"===t?console.error(e):"warning"===t?console.warn(e):"debug"===t&&console.debug(e))},n}return t.__extends(o,e),o.prototype.render=function(){var e=this.props,t=e.children,r=e.trigger;if(r)return n.cloneElement(r(),{onClick:this.handleClick});if(!l)return this.logMessages(['"react-to-print" requires React ^16.3.0 to be able to use "PrintContext"']),null;var o={handlePrint:this.handleClick};return n.createElement(l.Provider,{value:o},t)},o.defaultProps=u,o}(n.Component);e.default=s,e.useReactToPrint=function(e){if(!c)return e.suppressErrors||console.error('"react-to-print" requires React ^16.8.0 to be able to use "useReactToPrint"'),function(){throw new Error('"react-to-print" requires React ^16.8.0 to be able to use "useReactToPrint"')};var r=n.useMemo((function(){return new s(t.__assign(t.__assign({},u),e))}),[e]);return n.useCallback((function(){return r.handleClick()}),[r])}}(),i}()})); |
{ | ||
"name": "react-to-print", | ||
"version": "2.14.10", | ||
"version": "2.14.11", | ||
"description": "Print React components in the browser", | ||
@@ -43,25 +43,25 @@ "main": "lib/index.js", | ||
"devDependencies": { | ||
"@types/react": "^18.0.24", | ||
"@types/react-dom": "^18.0.8", | ||
"@typescript-eslint/eslint-plugin": "^5.10.1", | ||
"@typescript-eslint/parser": "^5.10.1", | ||
"acorn": "^8.7.0", | ||
"@types/react": "^18.0.26", | ||
"@types/react-dom": "^18.0.10", | ||
"@typescript-eslint/eslint-plugin": "^5.48.0", | ||
"@typescript-eslint/parser": "^5.48.0", | ||
"acorn": "^8.8.1", | ||
"clean-webpack-plugin": "^4.0.0", | ||
"copy-webpack-plugin": "^11.0.0", | ||
"css-loader": "^6.5.1", | ||
"eslint": "^8.7.0", | ||
"css-loader": "^6.7.3", | ||
"eslint": "^8.31.0", | ||
"html-webpack-plugin": "^5.5.0", | ||
"husky": "^8.0.1", | ||
"lint-staged": "^13.0.3", | ||
"husky": "^8.0.2", | ||
"lint-staged": "^13.1.0", | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0", | ||
"react-tabs": "^5.1.0", | ||
"react-tabs": "^6.0.0", | ||
"style-loader": "^3.3.1", | ||
"ts-loader": "^9.2.6", | ||
"tslib": "^2.3.1", | ||
"typescript": "^4.5.5", | ||
"ts-loader": "^9.4.2", | ||
"tslib": "^2.4.1", | ||
"typescript": "^4.9.4", | ||
"url-loader": "^4.1.1", | ||
"webpack": "^5.67.0", | ||
"webpack-cli": "^4.9.2", | ||
"webpack-dev-server": "^4.7.3" | ||
"webpack": "^5.75.0", | ||
"webpack-cli": "^5.0.1", | ||
"webpack-dev-server": "^4.11.1" | ||
}, | ||
@@ -68,0 +68,0 @@ "lint-staged": { |
@@ -223,5 +223,5 @@ <p align="center"> | ||
### Can `react-to-print` print a PDF? | ||
### Can `react-to-print` be used to download a PDF without using the Print Preview window? | ||
We simply open the browser's print preview window, so we aren't able to print a PDF as we lose control once the print preview window opens. However, it should be very easy to use `react-to-print` to take the information you need an pass it to a library that can generate a PDF. | ||
No. We aren't able to print a PDF as we lose control once the print preview window opens. However, it should be very easy to use `react-to-print` to take the information you need an pass it to a library that can generate a PDF. | ||
@@ -264,2 +264,39 @@ ```tsx | ||
### Setting state in `onBeforeGetContent` | ||
Recall that setting state is asynchronous. As such, you need to pass a `Promise` and wait for the state to update. | ||
```tsx | ||
const [isPrinting, setIsPrinting] = useState(false); | ||
const printRef = useRef(null); | ||
// We store the resolve Promise being used in `onBeforeGetContent` here | ||
const promiseResolveRef = useRef(null); | ||
// We watch for the state to change here, and for the Promise resolve to be available | ||
useEffect(() => { | ||
if (isPrinting && promiseResolveRef.current) { | ||
// Resolves the Promise, letting `react-to-print` know that the DOM updates are completed | ||
promiseResolveRef.current(); | ||
} | ||
}, [isPrinting]); | ||
const handlePrint = useReactToPrint({ | ||
content: () => printRef.current, | ||
onBeforeGetContent: () => { | ||
return new Promise((resolve) => { | ||
promiseResolveRef.current = resolve; | ||
setIsPrinting(true); | ||
}); | ||
}, | ||
onAfterPrint: () => { | ||
// Reset the Promise resolve so we can print again | ||
promiseResolveRef.current = null; | ||
setIsPrinting(false); | ||
} | ||
}); | ||
``` | ||
Note: for Class components, just pass the `resolve` to the callback for `this.setState`: `this.setState({ isPrinting: false }, resolve)` | ||
### Changing print settings in the print dialog | ||
@@ -291,2 +328,14 @@ | ||
### Set the page size | ||
The default page size is usually A4. Most browsers do not allow JavaScript or CSS to set the page size. For the browsers that do, it is usually done using the CSS page [`size`](https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size) property. Check [`caniuse`](https://caniuse.com/mdn-css_at-rules_page_size) to see if the browsers you develop against support this. | ||
```css | ||
@media print { | ||
@page { | ||
size: 50mm 150mm; | ||
} | ||
} | ||
``` | ||
### Set custom margin to the page ([29](https://github.com/gregnb/react-to-print/issues/29)) | ||
@@ -328,24 +377,23 @@ | ||
The `pageStyle` prop can be used to set anything from simple to complex styles. For example: | ||
The `pageStyle` prop should be a CSS string. For example: `".divider { break-after: always; }"` | ||
```js | ||
const pageStyle = ` | ||
@page { | ||
size: 80mm 50mm; | ||
} | ||
### Getting a blank page when printing | ||
@media all { | ||
.pagebreak { | ||
display: none; | ||
} | ||
} | ||
Many have found setting the following CSS helpful. See [#26](https://github.com/gregnb/react-to-print/issues/26) for more. | ||
@media print { | ||
.pagebreak { | ||
page-break-before: always; | ||
} | ||
```css | ||
@media print { | ||
html, body { | ||
height: 100vh; /* Use 100% here to support printing more than a single page*/ | ||
margin: 0 !important; | ||
padding: 0 !important; | ||
overflow: hidden; | ||
} | ||
`; | ||
} | ||
``` | ||
#### When you've set the `removeAfterPrint` prop to `true` | ||
If you are getting a blank page while setting `removeAfterPrint` to `true`, try setting it to `false`. This will tell the browser not to remove the `iframe` that we use to print, which it may be doing by mistake, especially on mobile browsers. | ||
### Styles incorrect in print dialog when using grid system | ||
@@ -357,2 +405,8 @@ | ||
What to know: | ||
- [`break-inside`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside) (replaces [`page-break-inside`](https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside)) | ||
- [`break-before`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-before) (replaces [`page-break-before`](https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before)) | ||
- [`break-after`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-after) (replaces [`page-break-after`](https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after)) | ||
#### Pattern for Page-Breaking Dynamic Content | ||
@@ -359,0 +413,0 @@ |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
45897
469
53
93
2
2
10