download

最新推荐文章于 2024-07-24 10:40:52 发布

Honey!

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量187

点赞数 1

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/zzuli111/article/details/135241077

版权

一、使用步骤

1.引入库

下载插件printjs并再页面引入

import printJS from 'print-js'

代码如下（示例）：

 handlePrint(params) {
      // this.$Print('#pdfFile')
      // this.pdfShow = true
      console.log(this.selectionList, 'selectionList')
      if (this.selectionList.length == 0) {
        this.$message.warning('请选择一个合同')
      } else if (this.selectionList.length > 1) {
        this.$message.warning('只能选择一个合同')
        return
      }
      //
      if (this.selectionList[0].templateId == -1) {
        this.$message.warning('当前合同未配置合同模板，无法打印！')
      } else {
        downloadContract({
          id: this.selectionList[0].id,
          // templateId: 1,
        }).then(res => {
          console.log(res, 'res999')
          let pdfUrl = ''
          if(window.location.protocol == 'http:'){
            // http
            pdfUrl = res.data.data
          }else{
            // https
            pdfUrl = res.data.data.replace("http:","https:")
          }
          // 渲染到页面
          printJS({
            printable: pdfUrl, // 'printFrom', // 标签元素id
            // 'http://whsle-hopdata-dev.oss-cn-hangzhou.aliyuncs.com/upload/20231113/2c5f011b81adce116f1acabd0da2efb5.pdf', // 'printFrom', // 标签元素id
            type: 'pdf',
            // header: 'ceshi', // '表单',
            targetStyles: ['*'],
            style: '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾
            ignoreElements: ['no-print'], // ['no-print']
            properties: null,
          })
        })