图片转world文档 Excel excel 新

web修理工

已于 2022-09-09 18:13:49 修改

阅读量304

点赞数

分类专栏： canvas 文章标签： echarts javascript vue.js 前端

于 2022-09-02 19:01:54 首次发布

本文链接：https://blog.csdn.net/qq_42374676/article/details/126669012

版权

canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

分页生成paf https://www.jianshu.com/p/9f6ebc0e0d70


<template>
  <div>
    <!-- <div class="xx">xxx</div> -->
    <v-chart
      ref="domx"
      :options="polar"
    />
    <!-- <div>{{ aa }}</div> -->
    <!-- <odiv v-model="aa"></odiv> -->
    <button @click="domimg()">domimg</button>
  </div>
</template>

<style>
/**
 * The default size is 600px×400px, for responsive charts
 * you may need to set percentage values as follows (also
 * don't forget to provide a size for the container).
 */
.echarts {
  width: 100%;
  height: 100%;
}
</style>

<script>
import html2canvas from "html2canvas";
import ECharts from "vue-echarts";
import "echarts/lib/chart/line";
import "echarts/lib/component/polar";
import odiv from "../components/odiv.vue";
let dir = document.documentElement.clientWidth / 375;
export default {
  components: {
    "v-chart": ECharts,
    odiv: odiv,
  },
  data() {
    return {
      polar: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      },
    };
  },

  methods: {
    base64ToUint8Array(base64String) {
      const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
      const base64 = (base64String + padding)
        .replace(/\-/g, "+")
        .replace(/_/g, "/");

      const rawData = window.atob(base64);
      const outputArray = new Uint8Array(rawData.length);

      for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
      }
      return outputArray;
    },
    domimg(callback) {
      let dom = this.$refs.domx.$el;
      console.log(dom, "domxdomxdomx");
      html2canvas(dom, {
        width: dom.offsetWidth,
        height: dom.offsetHeight,
        scale: 1,
        useCORS: true,
        async: true,
        allowTaint: true,
        taintTest: false,
        windowWidth: 375,
        windowHeight: 1500,
      }).then((canvas) => {
        let url = canvas.toDataURL("image/png", 0.8);
        console.log(url, "****");

        let _creatHtmlTree = (htmlTree, style = "") => {
          return `
                <!DOCTYPE html>
                    <html lang="en">
   					<head>
                    <meta charset="UTF-8">
                    <style>
                        ${style}
                    </style>
                    </head>
                    <body>
                        ${htmlTree}
                    </body>
                    </html>`;
        };

        let _downloadWord = (url) => {
          let node = `<div>
        <span class='title-span'>这里是文档</span>
        <img width=400 height=300 src=${url} alt='加载失败'></div>`;

          let html = _creatHtmlTree(node, style);
          let style = ".title-span{ font-size:16px; color:red }";
          let blob = new Blob([html], {
            type: "application/vnd.ms-word;charset=UTF-8",
          });
          // FileSaver.saveAs(blob, "文档名称.doc");

          let myUrl = URL.createObjectURL(blob);

          let a = document.createElement("a");
          a.setAttribute("href", myUrl);
          a.setAttribute("download", "文档名称.doc");
          a.setAttribute("target", "_blank");
          let clickEvent = document.createEvent("MouseEvents");
          clickEvent.initEvent("click", true, true);
          a.dispatchEvent(clickEvent);
        };

        _downloadWord(url);
        /**
         * 生成HTML
         * @param {String} htmlTree html
         * @param {String} style 样式
         */

        // const downloadFile = function downloadFile(url, name = "xx.doc") {
        //   let a = document.createElement("a");
        //   a.setAttribute("href", url);
        //   a.setAttribute("download", name);
        //   a.setAttribute("target", "_blank");
        //   let clickEvent = document.createEvent("MouseEvents");
        //   clickEvent.initEvent("click", true, true);
        //   a.dispatchEvent(clickEvent);
        // };
        // const dataURLtoBlob = function (dataurl) {
        //   let arr = dataurl.split(","),
        //     mime = arr[0].match(/:(.*?);/)[1],
        //     bstr = atob(arr[1]),
        //     n = bstr.length,
        //     u8arr = new Uint8Array(n);
        //   while (n--) {
        //     u8arr[n] = bstr.charCodeAt(n);
        //   }
        //   console.log(mime, "====mime");
        //   return new Blob([u8arr], { type: mime });
        // };

        // const downloadFileByBase64 = function (base64, name) {
        //   let myBlob = dataURLtoBlob(base64);
        //   let myUrl = URL.createObjectURL(myBlob);
        //   downloadFile(myUrl, name);
        // };

        // downloadFileByBase64(
        //   "data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8;base64," +
        //     url.split(",")[1],
        //   "xx.docx"
        // );

        // url = url.split(",")[1];--------------------

        // var uInt8Array = this.base64ToUint8Array(url);

        // var raw = window.atob(url);
        // var uInt8Array = new Uint8Array(raw.length);
        // for (var i = 0; i < raw.length; i++) {
        //   uInt8Array[i] = raw.charCodeAt(i);
        // }

        // const link = document.createElement("a");
        // const blob = new Blob([uInt8Array], {
        //   // type: 'application/vnd.ms-excel'
        //   type: "application/msword",
        // });

        // link.style.display = "none";
        // link.href = URL.createObjectURL(blob);
        // //link.setAttribute('download','对比结果_'+$scope.你的变量+'.xls');
        // link.setAttribute("download", "对比结果.doc");

        // document.body.appendChild(link);
        // link.click();

        // document.body.removeChild(link);

        // console.log(url, "===url");
        // callback(url);
      });
    },
    shows(item) {
      console.log(item);
      if (
        item.FILETYPE &&
        item.FILETYPE.substring(
          item.FILETYPE.lastIndexOf(".") + 1,
          item.FILETYPE.length
        ) == "docx"
      ) {
        const dataURLtoBlob = function (dataurl) {
          let arr = dataurl.split(","),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          return new Blob([u8arr], { type: mime });
        };

        const downloadFile = function downloadFile(url, name = item.CNAME) {
          let a = document.createElement("a");
          a.setAttribute("href", url);
          a.setAttribute("download", name);
          a.setAttribute("target", "_blank");
          let clickEvent = document.createEvent("MouseEvents");
          clickEvent.initEvent("click", true, true);
          a.dispatchEvent(clickEvent);
        };

        const downloadFileByBase64 = function (base64, name) {
          let myBlob = dataURLtoBlob(base64);
          let myUrl = URL.createObjectURL(myBlob);
          downloadFile(myUrl, name);
        };
        downloadFileByBase64(
          "data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64," +
            item.ANNEXCONTENT
        );
      } else {
        this.imgsrc = "data:image/jpeg;base64," + item.ANNEXCONTENT;
        this.modal3_show = true;
      }
    },

    img() {
      const image = new Image();
      image.setAttribute("crossOrigin", "Anonymous"); // 解决某些图片跨域（有些图片仍不可使用)
      image.src = "url";
      image.onload = (img) => {
        let base64 = setBase64(img);
        var arr = base64.split(",");
        var mime = arr[0].match(/:(.*?);/)[1]; // 获取图片的类型 （image/jpg)
        var bstr = atob(arr[1]); // 将base64转码
        var n = bstr.length; // 获得转码长度
        var u8arr = new Uint8Array(n); // 获得length个为0的数组
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n); // 获得unicode码
        }
        this.file = new File([u8arr], "文件名", { type: mime }); // 生成文件
        console.log(this.file);
        this.url = base64;
      };
    },

    setBase64(img) {
      const ctx = document.createElement("canvas");
      const c = ctx.getContext("2d");
      ctx.width = img.path[0].width;
      ctx.height = img.path[0].height;
      c.drawImage(img.path[0], 0, 0, img.path[0].width, img.path[0].height);
      let ext = image.src
        .substring(image.src.lastIndexOf(".") + 1)
        .toLowerCase(); // 获取图片后缀
      const url = ctx.toDataURL(`image/${ext}`);
      return url;
    },
  },
  created() {
    this.$store.dispatch("message", true).then((res) => {
      console.log(res, "===================", "/ajax");
    });
  },
};
</script>
<style lang='scss' scoped>
@import "src/style/mixin";
$highlight-color: #f00;

.xx {
  color: $highlight-color;
  @include bg;
  @extend .ext;
}
</style>

转载:https://www.jianshu.com/p/ea757f90b19d

canvas–>blobs

$("#confirm").on("click", function () {
    var img_canvas = gdocument.getElementsByTagName('canvas')
    img_canvas.toBlob(function (blob) {
      var url = URL.createObjectURL(blob);
      $(".canvas").html('');
    })
  });

canvas–>base64

$("#confirm").on("click", function () { 
    var img_canvas = document.getElementsByTagName('canvas') 
    var base64URL = img_canvas.toDataURL("image/png"); 
    $(".canvas").html(``)
});

Blob（File） —> Base64

/**
 * Blob转Base64
 * @param base64 String base64格式字符串
 * @param callback Function 获取转换结果e.target.result后执行的回调函数
 */
 function translateBlobToBase64(blob,callback){
     var reader = new FileReader()
     reader.onload = function(e){
         callback(e.target.result)
     }
     reader.readAsDataURL(blob)  
     //读取后，result属性中将包含一个data:URL格式的Base64字符串用来表示所读取的文件
 }

Base64 —> file

转化思路：base64 --> Uint8Array --> new File（）

/**
 * Base64转
 * @param base64 String base64格式字符串
 * @param contentType String file对象的文件类型，如："image/png"
 * @param filename String 文件名称或者文件路径
 */
 function translateBase64ImgToFile(base64,filename,contentType){
     var arr = base64.split(',')  //去掉base64格式图片的头部
     var bstr = atob(arr[1])   //atob()方法将数据解码
     var leng = bstr.length
     var u8arr = new Uint8Array(leng)
     while(leng--){
        u8arr[leng] =  bstr.charCodeAt(leng) //返回指定位置的字符的 Unicode 编码
     }
     return new File([u8arr],filename,{type:contentType}) 
 }

Base64 —> Blob

转化思路：base64 --> Uint8Array --> new Blob()

/**
 * Base64转Blob
 * @param base64 String base64格式字符串
 * @param contentType String blob对象的文件类型，如："image/png"
 */
 function translateBase64ImgToBlob(base64,contentType){
     var arr = base64.split(',')  //去掉base64格式图片的头部
     var bstr = atob(arr[1])   //atob()方法将数据解码
     var leng = bstr.length
     var u8arr = new Uint8Array(leng)
     while(leng--){
        u8arr[leng] =  bstr.charCodeAt(leng) //返回指定位置的字符的 Unicode 编码
     }
     var blob = new Blob([u8arr],{type:contentType})
     var blobImg = {}
     blobImg.url = URL.createObjectURL(blob )  //创建URL,
     blobImg.name = new Date().getTime() + '.png'
     return blobImg

URL — > Base64

转化思路：url – > --> Canvas --> canvas.toDataURL --> Base64

/**
 * URL转base64
 * @param url String 图片链接
 * @callback Function 获取base64格式后的回调函数
 */
function translateImgToBase64(url,callback){
    var canvas = document.createElement('canvas')
    context = canvas.getContext('2d')
    img = new Image  //通过构造函数绘制图片实例
    img.crossOrigin = 'Anonymous'  //处理图片跨域问题，见拓展1
    img.onload = function(){   //该加载过程为异步事件，请先确保获取完整图片
        canvas.width = img.width
        canvas.height = img.height
        context.drawImage(img,0,0)  //将图片绘制在canvas中
        var URLData = canvas.toDataURL('image/png')
        callback(URLData);
        canvas = null
    }
    img.src = url
}

/**
 * 获取base64格式的回调函数
 * @param URLData 获取的base64格式
 */
 function get Base64(URLData){
     console.log("base64",URLData)
 }