preview.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <template>
  2. <el-dialog
  3. :visible.sync="visible"
  4. :show-close="false"
  5. :maskClosable="false"
  6. :close-on-click-modal="false"
  7. @cancel="hideModal"
  8. :width="350 + 'mm'"
  9. >
  10. <div :spinning="spinning" style="min-height: 100px">
  11. <div id="preview_content" ref="printDom"></div>
  12. </div>
  13. <template slot="title">
  14. <div>
  15. <!-- <div style="margin-right: 20px">打印预览</div> -->
  16. <el-button
  17. :loading="waitShowPrinter"
  18. type="primary"
  19. icon="printer"
  20. @click.stop="print"
  21. >打印</el-button
  22. >
  23. <!-- <el-button type="primary" icon="printer" @click.stop="toPdf">pdf</el-button> -->
  24. </div>
  25. </template>
  26. <template slot="footer">
  27. <el-button key="close" type="info" @click="hideModal"> 关闭 </el-button>
  28. </template>
  29. </el-dialog>
  30. </template>
  31. <script>
  32. // import { downloadPDF } from '@/utils/pdf'
  33. import { addPrint } from "./print-data";
  34. import { detailArr } from "./print-data";
  35. export default {
  36. name: "printPreview",
  37. props: {},
  38. data() {
  39. return {
  40. visible: false,
  41. spinning: true,
  42. waitShowPrinter: false,
  43. // 纸张宽 mm
  44. width: 0,
  45. // 模板
  46. hiprintTemplate: {},
  47. // 数据
  48. printData: {},
  49. };
  50. },
  51. computed: {},
  52. watch: {},
  53. created() {},
  54. mounted() {},
  55. methods: {
  56. // handleExport() {
  57. // downloadPDF(this.$refs.printDom);
  58. // },
  59. hideModal() {
  60. this.visible = false;
  61. this.waitShowPrinter = false;
  62. // console.log(this.$parent);
  63. },
  64. show(hiprintTemplate, printData, width = "210") {
  65. this.visible = true;
  66. this.width = width;
  67. this.hiprintTemplate = hiprintTemplate;
  68. printData.addPrintHtml({
  69. options: {
  70. width: 140,
  71. height: 35,
  72. top: 180,
  73. left: 20,
  74. content: this.$refs.printData,
  75. },
  76. });
  77. setTimeout(() => {
  78. // eslint-disable-next-line no-undef
  79. $("#preview_content").html(hiprintTemplate.getHtml(printData));
  80. this.spinning = false;
  81. }, 500);
  82. },
  83. print() {
  84. this.hiprintTemplate.print({});
  85. setTimeout(() => {
  86. this.hideModal();
  87. }, 2000);
  88. },
  89. // toPdf() {
  90. // downloadPDF(this.$refs.printDom);
  91. // this.hiprintTemplate.toPdf({}, '打印预览');
  92. // },
  93. },
  94. };
  95. </script>
  96. <style scoped>
  97. ::v-deep .el-dialog__body {
  98. padding: 0;
  99. }
  100. ::v-deep tr {
  101. height: 40px !important;
  102. }
  103. ::v-deep .hiprint-printPaper {
  104. margin: 0 auto;
  105. }
  106. /* ::v-deep tr td {
  107. border: 0 !important;
  108. } */
  109. ::v-deep .hiprint-paperNumber {
  110. display: none;
  111. }
  112. .ant-modal-body {
  113. padding: 0px;
  114. }
  115. .ant-modal-content {
  116. margin-bottom: 24px;
  117. }
  118. </style>