在el-image组件的预览中添加打印功能(自定义功能)

思路:给图片添加点击事件,通过js获取预览的工具栏,在工具栏中添加自定义按钮及事件

1、html 中 image标签

 

   style="width: 139px;

   height: 89px"

   :src="fileUrl"

   :preview-src-list="[fileUrl]"

    @click="handleImageClick(fileUrl)" //添加点击事件

/>

2、再点击事件中,通过js操作dom,添加自定义按钮事件

   handleImageClick(fileUrl) {

      this.$nextTick(() => {

        const viewer = document.querySelector('.el-image-viewer__wrapper') //工具栏的dom

        if (viewer) {

          // 防止重复添加

          if (!document.querySelector('.custom-print-btns')) {

            const btn = document.createElement('button') //创建按钮

            btn.className = 'custom-print-btns'  //按需设计样式

            btn.innerHTML = ''

            btn.onclick = () => this.printImage(fileUrl) //点击按钮触发事件

            const btnGroup = viewer.querySelector('.el-image-viewer__actions__inner')

            if (btnGroup) {

              btnGroup.appendChild(btn) //在工具中添加按钮

            }

          }

        }

      })

    },

 

3、添加后的图

 

4、打印事件

 printImage(fileUrl) {

      const printWindow = window.open('', '_blank')

      printWindow.document.write(`

       

         

            打印图片

           

         

         

           

           

你可能感兴趣的:(vue.js,javascript,前端)