Javascript 为什么我的JSPdf npm包在没有任何更新的情况下破坏了我的应用程序?
我正在使用Javascript 为什么我的JSPdf npm包在没有任何更新的情况下破坏了我的应用程序?,javascript,html,npm,jspdf,Javascript,Html,Npm,Jspdf,我正在使用vue.js和jspdf生成pdf。没有更新jspdf包,我的应用程序坏了 我卸载了这个软件包作为一种解决方法,但是,我似乎不知道这个软件包破坏了这个应用程序 以下是错误: Uncaught TypeError: this.thenCore is not a function at Promise.y.then (webpack-internal:///./node_modules/jspdf/dist/jspdf.min.js:123) at
vue.js
和jspdf
生成pdf
。没有更新jspdf
包,我的应用程序坏了
我卸载了这个软件包作为一种解决方法,但是,我似乎不知道这个软件包破坏了这个应用程序
以下是错误:
Uncaught TypeError: this.thenCore is not a function
at Promise.y.then (webpack-internal:///./node_modules/jspdf/dist/jspdf.min.js:123)
at Promise.<anonymous> (adrum-latest.js:29)
at Promise.catch (<anonymous>)
at z (webpack-internal:///./node_modules/vue-analytics/dist/vue-analytics.js:1)
at S (webpack-internal:///./node_modules/vue-analytics/dist/vue-analytics.js:1)
at Function.Vue.use (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5102)
at eval (webpack-internal:///./src/main.js:53)
at Module../src/main.js (app.js:21185)
at __webpack_require__ (app.js:767)
at fn (app.js:130)
未捕获类型错误:this.thenCore不是函数
在Promise.y.then(网页包-internal:///./node_modules/jspdf/dist/jspdf.min.js:123)
答应。
从“html到图像”导入html图像;
从“downloadjs”导入下载;
从“print js”导入printJS;
从“jsPDF”导入jsPDF;
从“vuex”导入{mapActions,mapState};
导出默认值{
名称:“出口卡”,
道具:{
图标:字符串,
iconWeight:字符串,
cardText:String,
filePath:String,
},
计算:mapState({
selectedMediaType:state=>state.brandBuilderEditor.selectedMediaType,
selectedImage:state=>state.brandBuilderEditor.selectedImage,
selectedDesign:state=>state.brandBuilderEditor.selectedDesign,
state:state=>state,
}),
方法:{
…映射操作([
“切换加载程序”
]),
上载文件(文件){
常量url=https://api.cloudinary.com/v1_1/uwm/upload';
const xhr=new XMLHttpRequest();
const fd=new FormData();
xhr.open('POST',url,true);
setRequestHeader('X-request-With','XMLHttpRequest');
//重置上载进度条
/*
document.getElementById('progress').style.width=0;
*/
//更新进度(可用于显示进度指示器)
xhr.upload.addEventListener('progress',(e)=>{
/*var进度=数学轮((e.loaded*100.0)/e.total);
document.getElementById('progress')。style.width=progress+“%”*/
log(`FileUploadProgressData.loaded:${e.loaded},
data.total:${e.total}`);
});
xhr.onreadystatechange=函数(){
如果(xhr.readyState==4&&xhr.status==200){
//文件上载成功
const response=JSON.parse(xhr.responseText);
console.log('response',response);
下载(`https://res.cloudinary.com/uwm/video/upload/eo_10,o_50,l_${response.public_id.replace('/',':')},所以_0/v1566662844/videos/missworld.mp4`,'my video.mp4');
}
};
fd.append('upload_preset','jlw test');
fd.append('tags','browser_upload');//可选-在Cloudinary中为图像管理员添加标记
fd.append('file',file);
xhr.send(fd);
},
getFileName(){
让mediaType='';
开关(此。selectedMediaType){
案例1:
mediaType='flyer';
打破
案例2:
mediaType=‘社会旗帜’;
打破
案例3:
mediaType='视频';
打破
案例4:
mediaType='呈现';
打破
案例6:
mediaType='定价';
打破
违约:
mediaType='flyer';
}
返回'my-${mediaType}';
},
下载图像(){
//仅当导出类型不是电子邮件时才允许加载和缩放模板。
如果(this.cardText!=“发送给联系人”){
this.toggleLoader();
//这允许标题卡比例为1,而不是视口大小。
document.getElementById('item-container').classList.add('fullscale');
}
//创建比例检查的目标项目
const targetScale=document.getElementById('item-container');
//将目标检查设置为间隔
const interval=setInterval(scaleTemplateCheck,250);
让fileName=this.getFileName();
常数this=这个;
函数scaleTemplateCheck(){
//这将获取标题卡的当前比例。
const compStyle=window.getComputedStyle(targetScale);
const transformValue=compStyle.getPropertyValue('transform');
//如果间隔未产生1的比例结果,请重新执行间隔,并在确认1的比例后,继续进行htmlToImage检查
if(transformValue!=“矩阵(1,0,0,1,0,0)”){
返回;
}
间隔时间;
//检查各种导出类型的比例
如果(_this.cardText=='.PNG'){
htmlToImage.toPng(document.getElementById('item-container'),{backgroundColor:'#fff',质量:1})
。然后((数据URL)=>{
下载(dataUrl,`${fileName}.png`);
如果(_this.selectedMediaType!==2){
//这允许标题卡比例为1,而不是视口大小。
document.getElementById('item-container').classList.remove('fullscale');
<template><!--download href="`${filePath}`"-->
<a class="export-card" @click="downloadImage()">
<span class="export-card-image"><font-awesome-icon :icon="[iconWeight, icon]"/></span>
<span class="export-card-type">{{cardText}}</span>
</a>
</template>
<script>
import htmlToImage from 'html-to-image';
import download from 'downloadjs';
import printJS from 'print-js';
import jsPDF from 'jspdf';
import {mapActions,mapState} from 'vuex';
export default {
name: 'ExportCard',
props: {
icon: String,
iconWeight: String,
cardText: String,
filePath: String,
},
computed: mapState({
selectedMediaType: state => state.brandBuilderEditor.selectedMediaType,
selectedImage: state => state.brandBuilderEditor.selectedImage,
selectedDesign: state => state.brandBuilderEditor.selectedDesign,
state: state => state,
}),
methods: {
...mapActions([
'toggleLoader'
]),
uploadFile(file) {
const url = 'https://api.cloudinary.com/v1_1/uwm/upload';
const xhr = new XMLHttpRequest();
const fd = new FormData();
xhr.open('POST', url, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
// Reset the upload progress bar
/*
document.getElementById('progress').style.width = 0;
*/
// Update progress (can be used to show progress indicator)
xhr.upload.addEventListener('progress', (e) => {
/* var progress = Math.round((e.loaded * 100.0) / e.total);
document.getElementById('progress').style.width = progress + "%"; */
console.log(`fileuploadprogress data.loaded: ${e.loaded},
data.total: ${e.total}`);
});
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// File uploaded successfully
const response = JSON.parse(xhr.responseText);
console.log('response', response);
download(`https://res.cloudinary.com/uwm/video/upload/eo_10,o_50,l_${response.public_id.replace('/', ':')},so_0/v1566662844/videos/missworld.mp4`, 'my-video.mp4');
}
};
fd.append('upload_preset', 'jlw-test');
fd.append('tags', 'browser_upload'); // Optional - add tag for image admin in Cloudinary
fd.append('file', file);
xhr.send(fd);
},
getFileName() {
let mediaType = '';
switch (this.selectedMediaType) {
case 1:
mediaType = 'flyer';
break;
case 2:
mediaType = 'social-banner';
break;
case 3:
mediaType = 'video';
break;
case 4:
mediaType = 'presentation';
break;
case 6:
mediaType = 'pricing';
break;
default:
mediaType = 'flyer';
}
return `my-${mediaType}`;
},
downloadImage() {
// Only allow the loader and scaling of the template if the export type is not email.
if(this.cardText !== 'Send to Contact') {
this.toggleLoader();
// This allows the Title card scale to be a scale of 1 instead of the viewport size.
document.getElementById('item-container').classList.add('fullscale');
}
// create the target item for the scale check
const targetScale = document.getElementById('item-container');
// Set the target check to an interval
const interval = setInterval(scaleTemplateCheck, 250);
let fileName = this.getFileName();
const _this = this;
function scaleTemplateCheck() {
// This gets the current scale of the title card.
const compStyle = window.getComputedStyle(targetScale);
const transformValue = compStyle.getPropertyValue('transform');
// If the interval does not produce the scale of 1 result redo the interval and once the scale of 1 is confirmed proceed to the htmlToImage checks
if(transformValue !== 'matrix(1, 0, 0, 1, 0, 0)') {
return;
}
clearInterval(interval);
// Checks the scale for the various export types
if (_this.cardText === '.PNG') {
htmlToImage.toPng(document.getElementById('item-container'), { backgroundColor: '#fff', quality: 1 })
.then((dataUrl) => {
download(dataUrl, `${fileName}.png`);
if (_this.selectedMediaType !== 2) {
// This allows the Title card scale to be a scale of 1 instead of the viewport size.
document.getElementById('item-container').classList.remove('fullscale');
} _this.toggleLoader();
});
} else if (_this.cardText === '.JPG') {
htmlToImage.toJpeg(document.getElementById('item-container'), { backgroundColor: '#fff', quality: 1 })
.then((dataUrl) => {
download(dataUrl, `${fileName}.jpg`);
if (_this.selectedMediaType !== 2) {
document.getElementById('item-container').classList.remove('fullscale');
} _this.toggleLoader();
});
} else if (_this.cardText === '.mp4') {
htmlToImage.toPng(document.getElementById('item-container'), { backgroundColor: '#fff', quality: 1 })
.then((dataUrl) => {
_this.uploadFile(dataUrl);
});
} else if (_this.cardText === '.PDF') {
const filename = `${fileName}.pdf`;
htmlToImage.toJpeg(document.getElementById('item-container'), { backgroundColor: '#fff', quality: 1 })
.then((canvas) => {
// eslint-disable-next-line new-cap
const pdf = new jsPDF('p', 'mm', 'letter');
if (_this.selectedMediaType === 1 || _this.selectedMediaType === 6) {
pdf.addImage(canvas, 'JPEG', 8, 8, 200, 258);
} else if ((_this.selectedMediaType === 2)) {
pdf.addImage(canvas, 'JPEG', 8, 8, 200, 200);
}
pdf.save(filename);
if (_this.selectedMediaType !== 2) {
document.getElementById('item-container').classList.remove('fullscale');
}
_this.toggleLoader();
});
} else if (_this.cardText === 'Print') {
htmlToImage.toJpeg(document.getElementById('item-container'), { backgroundColor: '#fff' })
.then((dataUrl) => {
console.log('dataUrl', dataUrl)
function VoucherSourcetoPrint(source) {
return "<html><head><script>function step1(){\n" +
"setTimeout('step2()', 10);}\n" +
"function step2(){window.print();window.close()}\n" +
"</scri" + "pt></head><body onload='step1()'>\n" +
"<img src='" + source + "' style='max-width:100%'/></body></html>";
}
const Pagelink = "about:blank";
const pwa = window.open(Pagelink, "_new");
pwa.document.open();
pwa.document.write(VoucherSourcetoPrint(dataUrl));
pwa.document.close();
if (_this.selectedMediaType !== 2) {
document.getElementById('item-container').classList.remove('fullscale');
}
_this.toggleLoader();
});
} else if (_this.cardText === 'Download') {
window.open(_this.selectedDesign.item.medias[0].uri);
}
}// end of if statement
},
},
};
</script>
<style lang="scss" scoped>
.export-card {
display: flex;
flex-direction: column;
align-items: center;
background-color: $off-white;
border-radius: $b360-border-radius-base;
border: $b360-border-width-thin $border-color-light solid;
@include rem('padding', 19px 0px 18px);
text-decoration: none;
box-shadow: none;
transition: $b360-motion-selection;
cursor: pointer;
&:hover {
border-color: $b360-color--gray__medium;
box-shadow: 0 0 6px $shadow-color;
}
}
.export-card-image {
@include rem('font-size', 30px);
color: $brand-teal;
line-height: 0;
}
.export-card-type {
font-size: $b360-font-size--base;
line-height: 1;
@include rem('margin-top', 15px);
color: $text-base-color;
}
</style>