为了写些demo，我上架了个小程序：【i不简】哈喽哇！我是小不，不简说的不。在代码世界疯狂蹦跶的 “非资深选手”🙋‍♂

哈喽哇！我是小不，不简说的不。在代码世界疯狂蹦跶的 “非资深选手”🙋‍♂️！主打一个*“踩坑我来，避坑你学”*。毕竟独乐乐不如众乐乐，让大家少走弯路，才是咱的终极使命✨～

这些天也是一直在副业摸索中。跌跌撞撞，看了很多，也学到了很多。

前言

最近发送有不少小伙伴想要在非web环境下处理 vue-plugin-hiprint的模板数据，在uniapp，小程序端预览模板，或者获取pdf文件

文末见小程序链接,demo源码

那么本期也是实操，我把往期文章以及这些可能需要的功能上架到了我的小程序：【i不简】如图：

模板预览，pdf

部署服务端

我的服务器配置：2C 4G

本地用到我的另一个开源项目：node-hiprint-pdf

它的原理，我早期文件也介绍过了，这里就不赘述了。详情看文章：mp.weixin.qq.com/s/xJP8WSOoD…

见项目文件 Dockerfile以及docker-compose.yaml 这两个 docker 配置文件

为了实时修改，存放一些资源，我修改了一下 docker-compose.yaml 看代码

version: "3"
services:
  node-hiprint-pdf:
    image: node-hiprint-pdf:1.0.0
    restart: always
    container_name: node-hiprint-pdf
    build:
      context: ./
      dockerfile: Dockerfile
    ports:
      - "3002:3002"
    volumes:
      # 挂载项目目录的 public 目录
      - ./public:/app/public

而后构建运行 docker 服务即可：

docker-compose up -d

如果是Linux服务器，由于docker版本原因，如果报错，你可能需要换成

docker compose up -d

注意：docker构建比较耗时，有可能网络原因导致失败。大家要多摸索摸索。

启动好后，将会有一个 3000 端口的服务后台服务。

uniapp端代码

本期采用了牛X 的开源框架：

开箱即用。

UI部分就没什么好说的了，直接上核心代码：

首先定义咱们的后端API：

export const getImage = (data) => {
  return http.post('/img', data);
};

export const getPdf = (data) => {
  return http.post('/pdf', data);
};

export const getHtml = (data) => {
  return http.post('/html', data);
};

而后处理 UI 上的按钮事件：

<template>
<view class="my-2 mx-2">
      <wd-button custom-class="w-full mb-2" icon="image" @click="onGetImage">
        获取预览图片
      </wd-button>
      <wd-button custom-class="w-full mb-2" icon="file-pdf" @click="onGetPdf">获取pdf</wd-button>
      <wd-button custom-class="w-full mb-2" icon="code " @click="onGetHtml">获取html</wd-button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { getImage, getPdf, getHtml } from '@/service';

const template = ref({
  panels: [
    // xxx 省略模板数据
  ],
});
const printData = ref({
  name: '不简说',
});

const imageUrl = ref('');
const pdfUrl = ref('');
const htmlStr = ref('');

const onGetImage = async () => {
  uni.showLoading({
    title: '请稍后...',
    mask: true,
  });
  const res = await getImage({
    template: JSON.parse(templateStr.value),
    printData: JSON.parse(printDataStr.value),
  });
  uni.hideLoading();
  console.log(res);
  if (res.code === 1) {
    imageUrl.value = res.data as string;
  } else {
    toast.error(res.msg || '获取图片失败');
  }
};

const onGetPdf = async () => {
  uni.showLoading({
    title: '请稍后...',
    mask: true,
  });
  const res = await getPdf({
    template: JSON.parse(templateStr.value),
    printData: JSON.parse(printDataStr.value),
  });
  uni.hideLoading();
  if (res.code === 1) {
    pdfUrl.value = res.data as string;
  } else {
    toast.error(res.msg || '获取pdf失败');
  }
};

const onGetHtml = async () => {
  uni.showLoading({
    title: '请稍后...',
  });
  const res = await getHtml({
    template: JSON.parse(templateStr.value),
    printData: JSON.parse(printDataStr.value),
  });
  uni.hideLoading();
  if (res.code === 1) {
    htmlStr.value = res.data as string;
  } else {
    toast.error(res.msg || '获取html失败');
  }
};
</script>

总结

代码整体很简单。并没有很难理解吧。就是调用node后端的API传需要的数据，而后获取对应的数据。

服务器配置不高，希望各位不用疯狂体验测试。

公众号回复 2505 获取源码~

写到最后

💡 温馨提示：本文章可随意 “转发扩散”，让更多小伙伴加入 “少踩坑联盟”！毕竟独坑坑不如众坑坑…… 啊不，是独乐乐不如众乐乐😂！

👉 快来关注小不，悄悄说：评论区蹲一个 “你最想知道的代码小技巧，demo”，下一期说不定就为你量身定制啦🎯！