我正在构建一个angular8 pwa,我使用webshare来共享工作良好的文本。
自2019年5月以来,Chrome还支持
sharing of files
但是,尝试在typescript中构建文件共享时遇到以下错误:
notallowederror:权限被拒绝
let navigator: any;
navigator = window.navigator;
const title = "myTitle";
let data = {
title: title,
text: text,
url: url,
files: []
};
console.log(data);
if (navigator.share) {
fetch(url)
.then(res => res.blob())
.then(file => {
const fileName = data.text + ".mp3";
const options = { type: "audio/mp3" };
const newFile = new File([file], fileName, options);
data.files.push(newFile);
console.log(data);
//lastModified: 1564912016680
//lastModifiedDate: Sun Aug 04 2019 11:46:56 GMT+0200 (Mitteleuropäische //Sommerzeit) {}
//name: "myName.mp3"
//size: 40643
//type: "audio/mpeg"
//webkitRelativePath: ""
if (navigator.canShare(data)) {
navigator
.share(data)
.then(() => {})
.catch(err => {
console.error("Unsuccessful share " + err.message); //here is am getting the Permissions denied error
});
}
});
我不确定这是我获取文件的方式(看起来不错)还是调用canshare。
我在手机上使用Chrome浏览器。下面的小提琴对我的手机很好,但你需要选择一个文件。
https://jsfiddle.net/ericwilligers/8cpuskqd/
我的share函数位于一个按钮上,该按钮基本上保存了要共享的文件的链接。
编辑
如果将data.files从数组更改为对象,则会收到以下错误消息:
typeerror:未能在“navigator”上执行“canshare”:迭代器getter不可调用。
编辑2
我创建了一个代码笔来重现这个问题:
https://codepen.io/anon/pen/xvXvPZ
最佳答案
这起作用了
webshare(url, text) {
let navigator: any;
navigator = window.navigator;
const title = "yourTitle";
let data = { files: [], text: text, url: url, title: title };
const options = { type: "audio/mp3" };
this.http
.get(url, {
responseType: "arraybuffer"
})
.subscribe(response => {
console.log(response);
let blob = new File([response], `${text}.mp3`, options);
data.files.push(blob);
console.log(data);
if (navigator.canShare(data)) {
navigator
.share(data)
.then(() => {})
.catch(err => {
console.error("Unsuccessful share " + err);
});
}
});
}