api插件

说明

@sv-print/plugin-api-xxx 的插件, 属于 api 插件, 用于扩展模板对象的API。

Q: 为什么需要 api 插件?

A: 按需引入插件, 减少体积。还可以给使用者自定义的空间. 例如: 导出 word, excel, 指令 等等.

image 导出图片插件

安装方式:

npm i @sv-print/plugin-api-image

使用方式:

// vue3 为例
<template>
  <Designer authKey="xxxx" :plugins="plugins" @onDesigned="onDesigned"></Designer>
</template>
<script setup lang="ts">
  import {onMounted, ref} from 'vue';
  import {Designer} from '@sv-print/vue3';
  import pluginApiImage from "@sv-print/plugin-api-image";

  const plugins = ref([
    pluginApiImage({}), // 插件参数
  ]);
  const onDesigned = async (e) => {
    console.log('onDesigned');
    console.log(e);
    const {hiprint, designerUtils} = e.detail;
    // 模板对象 将新增 toImage 方法 实现导出图片.
    let printData = {name: "i不简"};
    const res = await designerUtils.printTemplate.toImage(printData, {
      isDownload: false, // 不自动下载
      name: '图片名称',
      limit: 10, // 默认 10  多少页为一个 图片文件, 太多 图片文件就很长
      type: 'image/jpeg', // 默认 image/jpeg   --> canvas.toDataURL(type, quality)
      pixelRatio: 2, // 图片像素比  2: 提高清晰度 默认 window.devicePixelRatio.
      quality: 0.8, // 默认 0.92  图片质量 0-1
      toType: 'url', // 默认 url   支持: url、blob
      onProgress: (cur, total) => {
        const percent = Math.floor((cur / total) * 100);
        console.log('toImage 进度', percent);
      },
    });
    console.log('toImage 导出结果', res);
  };
</script>

toPdf 导出pdf插件

安装方式:

# jspdf 2.x 版本实现
npm i @sv-print/plugin-api-pdf
# jspdf 3.x 版本实现
npm i @sv-print/plugin-api-pdf3

使用方式:

// vue3 为例
<template>
  <Designer authKey="xxxx" :plugins="plugins" @onDesigned="onDesigned"></Designer>
</template>
<script setup lang="ts">
  import {onMounted, ref} from 'vue';
  import {Designer} from '@sv-print/vue3';
  import pluginApiPdf from "@sv-print/plugin-api-pdf3";

  const plugins = ref([
    pluginApiPdf({}), // 插件参数
  ]);
  const onDesigned = async (e) => {
    console.log('onDesigned');
    console.log(e);
    const {hiprint, designerUtils} = e.detail;
    // 模板对象 将新增 toImage 方法 实现导出图片.
    let printData = {name: "i不简"};
    const res = await designerUtils.printTemplate.toPdf(printData, 'pdf名称', {
      isDownload: false, // 不自动下载
      type: 'blob', // 默认 blob  支持: blob、bloburl、pdfobjectnewwindow、dataurl  --> jspdf.output(type)
      onProgress: (cur, total) => {
        const percent = Math.floor((cur / total) * 100);
        console.log('toPdf 进度', percent);
      },
    });
    console.log('toPdf 导出结果', res);
  };
</script>