vue/js 调用系统打印功能进行图片(imgUrl,base64)，表格，自定义内容，页面局部区域打印【print-js、html2canvas】

在Vue中调用系统打印功能，可以使用JavaScript的window.print()方法。对于图片和表格的打印，可以通过创建一个新的窗口或iframe来实现。

以下是一个简单的例子，展示如何在Vue中打印局部区域内容，包括图片和表格：

<template>
  <div>
    <button @click="printContent">打印内容</button>
    <div id="printable">
      <!-- 图片通过base64格式 -->
      <img :src="imageBase64" alt="图片" />
      <!-- 表格内容 -->
      <table>
        <tr>
          <th>列1</th>
          <th>列2</th>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
        </tr>
      </table>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      imageBase64: 'data:image/png;base64,...' // 替换为实际的图片base64编码
    };
  },
  methods: {
    printContent() {
      const printWindow = window.open('', '_blank');
      const printContent = document.getElementById('printable').innerHTML;
      printWindow.document.write(printContent);
      printWindow.document.close();
      printWindow.focus();
      printWindow.print();
      printWindow.close();
    }
  }
};
</script>

在这个例子中，我们定义了一个printContent方法，它会创建一个新的浏览器窗口，然后将需要打印的内容（包括图片）通过document.write写入到这个新窗口中。之后调用printWindow.print()来触发打印功能，最后关闭窗口。

请注意，这个例子中的imageBase64应替换为实际的图片base64编码。如果要打印当前页面的特定部分，可以将document.getElementById('printable').innerHTML替换为选择所需DOM元素的逻辑。