print.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. // 打印类属性、方法定义
  2. /* eslint-disable */
  3. const Print =function(dom, options) {
  4. if (!(this instanceof Print)) return new Print(dom, options);
  5. this.options = this.extend({
  6. 'noPrint': '.no-print'
  7. }, options);
  8. if ((typeof dom) === "string") {
  9. this.dom = document.querySelector(dom);
  10. } else {
  11. this.dom = dom;
  12. }
  13. this.init();
  14. };
  15. Print.prototype = {
  16. init: function () {
  17. var content = this.getStyle() + this.getHtml();
  18. this.writeIframe(content);
  19. },
  20. extend: function (obj, obj2) {
  21. for (var k in obj2) {
  22. obj[k] = obj2[k];
  23. }
  24. return obj;
  25. },
  26. getStyle: function () {
  27. var str = "",
  28. styles = document.querySelectorAll('style,link');
  29. for (var i = 0; i < styles.length; i++) {
  30. str += styles[i].outerHTML;
  31. }
  32. str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
  33. return str;
  34. },
  35. getHtml: function () {
  36. var inputs = document.querySelectorAll('input');
  37. var textareas = document.querySelectorAll('textarea');
  38. var selects = document.querySelectorAll('select');
  39. for (var k in inputs) {
  40. if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
  41. if (inputs[k].checked == true) {
  42. inputs[k].setAttribute('checked', "checked")
  43. } else {
  44. inputs[k].removeAttribute('checked')
  45. }
  46. } else if (inputs[k].type == "text") {
  47. inputs[k].setAttribute('value', inputs[k].value)
  48. }
  49. }
  50. for (var k2 in textareas) {
  51. if (textareas[k2].type == 'textarea') {
  52. textareas[k2].innerHTML = textareas[k2].value
  53. }
  54. }
  55. for (var k3 in selects) {
  56. if (selects[k3].type == 'select-one') {
  57. var child = selects[k3].children;
  58. for (var i in child) {
  59. if (child[i].tagName == 'OPTION') {
  60. if (child[i].selected == true) {
  61. child[i].setAttribute('selected', "selected")
  62. } else {
  63. child[i].removeAttribute('selected')
  64. }
  65. }
  66. }
  67. }
  68. }
  69. return this.dom.outerHTML;
  70. },
  71. writeIframe: function (content) {
  72. var w, doc, iframe = document.createElement('iframe'),
  73. f = document.body.appendChild(iframe);
  74. iframe.id = "myIframe";
  75. iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
  76. w = f.contentWindow || f.contentDocument;
  77. doc = f.contentDocument || f.contentWindow.document;
  78. doc.open();
  79. doc.write(content);
  80. doc.close();
  81. this.toPrint(w);
  82. setTimeout(function () {
  83. document.body.removeChild(iframe)
  84. }, 100)
  85. },
  86. toPrint: function (frameWindow) {
  87. try {
  88. setTimeout(function () {
  89. frameWindow.focus();
  90. try {
  91. if (!frameWindow.document.execCommand('print', false, null)) {
  92. frameWindow.print();
  93. }
  94. } catch (e) {
  95. frameWindow.print();
  96. }
  97. frameWindow.close();
  98. }, 10);
  99. } catch (err) {
  100. console.log('err', err);
  101. }
  102. }
  103. };
  104. const MyPlugin = {}
  105. MyPlugin.install = function (Vue, options) {
  106. // 4. 添加实例方法
  107. Vue.prototype.$print = Print
  108. }
  109. export default MyPlugin