前端项目日常开发场景

二维码图片生成

1、安装依赖包 qrcode https://github.com/soldair/node-qrcode (opens new window) 以及依赖包 js-base64 进行 base64 加密解密 https://github.com/dankogai/js-base64 (opens new window)

# 安装 qrcode 依赖
npm install --save qrcode

# 安装 base64 依赖
npm install --save js-base64

2、在 vue 中使用，生成 svg 图片

在 template 样例如下：

<view class="padding">
    <view class="bg-white padding border-radius-20">
        <view class="flex justify-center margin-tb">
            <view style="position:relative">
                <image :src="qrcode" style="width: 440rpx;height: 440rpx;"></image>
            </view>
        </view>
        <view class="text-center padding-bottom-sm text-lg">请将电子票出示给现场工作人员以便核销</view>
    </view>
</view>

生成指定链接的二维码图片

import QRCode from 'qrcode';
import { Base64 } from 'js-base64';

export default {
    data() {
        return {
            qrcode: '',
        }
    },
    methods: {
        async generateQR(text) {
            try {
                let svgString = await QRCode.toString(text, {
                    errorCorrectionLevel: 'M',
                    width: 440,
                    scale: 1,
                    margin: 1,
                    type: 'svg'
                });
                let encodeSvg = Base64.encode(svgString);
                this.qrcode = `data:image/svg+xml;base64,${encodeSvg}`;
            } catch (err) {
                console.log(err);
            }
        }
    },
    async onLoad() {
        await this.generateQR('http://ww.baidu.com');
    }
}

DOM 生成图片文件

安装 dom-to-image 依赖包

npm install dom-to-image

生成并下载图片

<view>
    <view id="your_node_id_name"></view>
</view>

import domtoimage from 'dom-to-image';

export default {
    methods:{
        generatePDF() {
            uni.showLoading({title: '下载中...',mask: true});
            
            //TODO 自定义节点ID
            const element = document.getElementById('your_node_id_name');

            domtoimage.toPng(element,{ quality: 1 }).then( (dataUrl) => {
            
                const a = document.createElement('a');  
                
                a.href = dataUrl;  
                
                //TODO 自定义下载图片的名字
                a.download = 'your_image_name.png';  
                
                a.click();
                
                uni.hideLoading();
            });
        }
    }
}

另外也可尝试 html2canvas 依赖包

npm install --save html2canvas

<view>
    <view id="your_node_id_name"></view>
</view>

import html2canvas from 'html2canvas';

export default {
    methods: {
        async getImg(){
            const canvas = await html2canvas(document.getElementById('myid'));
            // 将 canvas 转换为图片数据 URL
            const imgData = canvas.toDataURL('image/png');  
                                
            // 创建一个新的 a 标签  
            const a = document.createElement('a');  
            a.href = imgData;  
            // 设置下载的文件名，注意文件名应该包括文件扩展名  
            a.download = 'download.png';  
                                
            // 触发 a 标签的点击事件来开始下载  
            a.click(); 
        }
    }
}

将图片转换成PDF文件

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';  

export default {
    methods:{
        async generatePDF(){
            const canvas = await html2canvas(document.getElementById('myid'));
            const imgData = canvas.toDataURL('image/png'); 
            
            // 创建一个新的PDF文档  
            const pdf = new jsPDF('p', 'mm', 'a4');
            
            // 图片等比缩放
            const width = pdf.internal.pageSize.getWidth();  
            const height = (canvas.height * width) / canvas.width;
            
            // 添加图片
            pdf.addImage(imgData, 'PNG', 0, 0, width, height);
            
            // 保存PDF  
            pdf.save('download.pdf');
		}
    }
}

DOM 生成 PDF 文件

<view>
    <div ref="page1" class="page">页面 1 内容...</div>  
    <div ref="page2" class="page">页面 2 内容...</div> 
</view>
    

import html2canvas from 'html2canvas';  
import jsPDF from 'jspdf';  
  
export default {  
  methods: {  
    async generatePdf() {  
      const pages = [this.$refs.page1, this.$refs.page2,];  

      // 创建一个新的PDF文档
      const pdf = new jsPDF('p', 'mm', 'a4');   
      let position = 0;  
  
      for (const page of pages) {  
        // 使用 html2canvas 将 DOM 元素转换为 canvas  
        const canvas = await html2canvas(page);  
        const imgData = canvas.toDataURL('image/png');  
  
        // 获取 canvas 的尺寸  
        const pdfWidth = pdf.internal.pageSize.getWidth();  
        const pdfHeight = (canvas.height * pdfWidth) / canvas.width; 
  
        // 添加图片到 PDF，并检查是否需要分页  
        if (position + pdfHeight > pdf.internal.pageSize.getHeight()) {  
          pdf.addPage(); // 添加新页  
          position = 0; // 重置位置  
        }  
  
        // 将图片添加到 PDF 的当前位置  
        pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pdfHeight);  
        position += pdfHeight;  
  
        // 如果需要，可以在这里添加页眉、页脚或其他内容  
      }  
  
      // 保存 PDF  
      pdf.save('multi-page.pdf');  
    },  
  
    // 辅助函数：获取图片的尺寸  
    getImageProperties(imgData) {  
      const img = new Image();  
      img.src = imgData;  
      return new Promise((resolve, reject) => {  
        img.onload = () => resolve({ height: img.height, width: img.width });  
        img.onerror = reject;  
      });  
    },  
  },  
};  
</script>  

前端大文件秒传，分片上传，断点续传