使用 Print-js 实现打印、预览功能前端部分

最新推荐文章于 2025-04-14 13:06:44 发布

壹元二九

最新推荐文章于 2025-04-14 13:06:44 发布

阅读量4.4k

点赞数 1

文章标签： js vue

本文链接：https://blog.youkuaiyun.com/weixin_41668951/article/details/118539142

版权

本文介绍了如何在前端使用Print-js库进行打印和预览功能的实现，包括官方文档链接、安装步骤以及组件封装的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、传送门：官方文档、大神文档

二、使用方式

安装：

npm install print-js --save

引入：

import print from 'print-js'

直接使用：

// base64格式
let base64Data = res.data
print({
    printable: base64Data, type: 'pdf', base64: true })

三、封装

打印预览组件封装：

<template>
  <div style="height:auto;">
    <el-button @click="printHtml" v-show="isPrint">打印</el-button>
    <iframe
      :class="{ 'iframe_scale': isScale }"
      :id="'show-iframe'+id"
      frameborder="0"
      scrolling="yes"
      style="background-color:transparent; position：absolute;width: 100%;
         height:100%; top: 0;left:0;bottom:0;"
    />
  </div>
</template>

<script>
import print from 'print-js'
import request from '@/utils/request'
import to from '@/to'
import * as API_Print from '@/api/print'
export default {
   
  name: 'Index',
  props: {
   
    id: {
   
      type: String,
      default: () => ''
    },
    // 通过链接打印
    htmlUrl: {
   
      type: String,
      default: () => ''
    },
    // 通过文本打印
    htmlText: {
   
      type: String,
      default: () => null
    },
    // 是否显示打印按钮
    isPrint: {
   
      type: Boolean,
      default: () =>