Почему мой пакет JSPDF NPM разбил мое приложение без каких -либо обновлений? ⇐ Html

[Anonymous]

Я использую vue.js и jspdf для генерации PDF . Без обновления пакета JSPDF мое приложение сломалось. < /p>

Я удалял пакет как обходной путь, однако не может показаться, что это насчет этого пакета. Uncaught TypeError: this.thenCore is not a function
at Promise.y.then (webpack-internal:///./node_modules/jspdf/dist/jspdf.min.js:123)
at Promise.


{{cardText}}




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(`('/', ':')},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 "function step1(){\n" +
"setTimeout('step2()', 10);}\n" +
"function step2(){window.print();window.close()}\n" +
"\n" +
"";
}
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
},
},
};



.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;
}



Подробнее здесь: https://stackoverflow.com/questions/593 ... ny-updates