图片转world文档 Excel excel 新

分页生成paf /p/9f6ebc0e0d70

<template><div><v-chartref="domx":options="polar"/><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 = AME) {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>

转载:/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.lengthvar 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.lengthvar 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' //处理图片跨域问题，见拓展1img.onload = function(){ //该加载过程为异步事件，请先确保获取完整图片canvas.width = img.widthcanvas.height = img.heightcontext.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)}