vue里根据路径打印图片,图片在浏览器里可以显示,点了打印以后在打印预览里就读取不到了,大佬们有什么办法解决么
 
  <div id="print">
        <img src="../../../../src/image/191106200010091.png" />
        <img src="http://localhost:8001/191119200010048.png" />
  </div>
       <a-button v-print="'#print'">打印</a-button>print() {
      this.$print(_this.$refs.print) //$refs的值要和html里的ref一致
    },

解决方案 »

  1.   

    用这个插件好像是不行的,用原生的打印吧
     // 原生的打印实现,将打印内容插入到body,打印完删除dom
     let targe = document.getElementById('printHtml')
     let content = document.createElement('div')
     content.id = 'printContent'
     content.innerHTML = target.innerHTML
     document.body.appendChild(content)
     window.print()
     document.body.removeChild(content)
    // 设置css只打印指定html
    @media print {
    body > *:not(#printContent) {
    display: none;
    }
    }@media screen {
    #printContent {
    display: none;
    }
    }[/code]
      

  2.   

    <img id="printTest" :src="img" :key="src" width="700">id放到 img里面
    <el-button v-print="'#printTest'">打印</el-button>
      

  3.   


    <html><head>  <style>
        @media print {
          body>*:not(#printContent) {
            display: none;
          }
        }    @media screen {
          #printContent {
            display: none;
          }
        }
      </style>
    </head><body>
      <div id="printHtml">
        <img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="">
        <div>打印其他文字内容</div>
      </div>
      <input type="button" value="打印" onclick="printHtml()">
      <script>
        function printHtml() {
          // 原生的打印实现,将打印内容插入到body,打印完删除dom
          let target = document.getElementById('printHtml')
          let content = document.createElement('div')
          content.id = 'printContent'
          content.innerHTML = target.innerHTML
          document.body.appendChild(content)
          window.print()
          document.body.removeChild(content)
        }
      </script>
    </body></html>
    不行还是没试过?如果试过应是报错变量不存在
      

  4.   


    不需要
    print() {
          this.$print(_this.$refs.print) //$refs的值要和html里的ref一致
        },
    这一段
    只用上面的一个按钮。一个img就可以了。