print.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. /*
  2. * @Author: lee
  3. * @Date: 2021-05-10 11:45:50
  4. * @LastEditors: lee
  5. * @LastEditTime: 2021-05-20 15:39:43
  6. * @Description: file content
  7. */
  8. import Print from './printarea.js';
  9. /**
  10. * @file 打印
  11. * 指令`v-print`,默认打印整个窗口
  12. * 传入参数`v-print="'#id'"` , 参数为需要打印局部的盒子标识.
  13. */
  14. const addEvent = (element, type, callback) => {
  15. if (element.addEventListener) {
  16. element.addEventListener(type, callback, false);
  17. } else if (element.attachEvent) {
  18. element.attachEvent('on' + type, callback);
  19. } else {
  20. element['on' + type] = callback;
  21. }
  22. }
  23. export default {
  24. directiveName: 'print',
  25. bind (el, binding, vnode) {
  26. let vue = vnode.context;
  27. let id = '';
  28. addEvent(el, 'click', () => {
  29. vue.$nextTick(() => {
  30. if (binding?.value?.clickMounted) {
  31. binding.value.clickMounted(vue)
  32. }
  33. if (typeof binding.value === 'string') {
  34. // 全局打印
  35. id = binding.value;
  36. localPrint();
  37. } else if (typeof binding.value === 'object' && !!binding.value.id) {
  38. // 局部打印
  39. id = binding.value.id;
  40. let ids = id.replace(new RegExp("#", "g"), '');
  41. let elsdom = document.getElementById(ids);
  42. if (!elsdom) console.log("id in Error"), id = '';
  43. localPrint();
  44. } else if(binding?.value?.preview) {
  45. localPrint();
  46. } else {
  47. window.print();
  48. return
  49. }
  50. });
  51. })
  52. const localPrint = () => {
  53. new Print({
  54. ids: id, // * 局部打印必传入id
  55. vue,
  56. url: binding.value.url, // 打印指定的网址,这里不能跟id共存 如果共存id的优先级会比较高
  57. standard: '', // 文档类型,默认是html5,可选 html5,loose,strict
  58. extraHead: binding.value.extraHead, // 附加在head标签上的额外标签,使用逗号分隔
  59. extraCss: binding.value.extraCss, // 额外的css连接,多个逗号分开
  60. previewTitle: binding.value.previewTitle || '打印预览', // 打印预览的标题
  61. zIndex: binding.value.zIndex || 20002, // 预览窗口的z-index
  62. previewPrintBtnLabel: binding.value.previewPrintBtnLabel || '打印', // 打印预览的标题
  63. popTitle: binding.value.popTitle, // title的标题
  64. preview: binding.value.preview || false, // 是否启动预览模式
  65. asyncUrl: binding.value.asyncUrl,
  66. previewBeforeOpenCallback () { // 预览窗口打开之前的callback
  67. binding.value.previewBeforeOpenCallback && binding.value.previewBeforeOpenCallback(vue)
  68. },
  69. previewOpenCallback () { // 预览窗口打开之后的callback
  70. binding.value.previewOpenCallback && binding.value.previewOpenCallback(vue)
  71. },
  72. openCallback () { // 调用打印之后的回调事件
  73. binding.value.openCallback && binding.value.openCallback(vue)
  74. },
  75. closeCallback () {
  76. binding.value.closeCallback && binding.value.closeCallback(vue)
  77. },
  78. beforeOpenCallback () {
  79. binding.value.beforeOpenCallback && binding.value.beforeOpenCallback(vue)
  80. }
  81. });
  82. };
  83. }
  84. };