使用电容器共享插件共享文件

Question

我需要共享一个PDF文件。我使用CapacitorJS实现本机功能。

let shareRet = await Share.share({
title: 'See cool stuff',
text: 'Really awesome thing you need to see right meow',
url: 'http://ionicframework.com/',
dialogTitle: 'Share with buddies'
});

这是来自示例。但我的数据是base64字符串。有没有办法把它作为附件分享？

Answer 1

此代码适用于iOS和Android：

import { Directory, Filesystem } from '@capacitor/filesystem';
import { Share } from '@capacitor/share';
function share(fileName: string, base64Data: string) {
return Filesystem.writeFile({
path: fileName,
data: base64Data,
directory: Directory.Cache
})
.then(() => {
return Filesystem.getUri({
directory: Directory.Cache,
path: fileName
});
})
.then((uriResult) => {
return Share.share({
title: fileName,
text: fileName,
url: uriResult.uri,
});
});
}

Answer 2

此代码将共享图像，尝试使用jspdf进行编辑以创建和共享pdf

import domtoimage from 'dom-to-image';
import { Share } from '@capacitor/share';
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { Capacitor } from '@capacitor/core';
import { Camera, CameraResultType } from '@capacitor/camera';

async shareImage() {
let receiptName = 'Receipt N:' + this.invoice?.invoiceNumber + '.png';
const div = this.screenshotElement.nativeElement;
const divHeight = div.clientHeight;
const divWidth = div.clientWidth;
const options = { background: '#ffffff', width: divWidth, height: divHeight };
await Filesystem.requestPermissions();
let base64Data = await domtoimage.toPng(div, options);
// browser download 
this.downloadImgElement.nativeElement.src = base64Data;
this.downloadLinkElement.nativeElement.href = base64Data;
this.downloadLinkElement.nativeElement.download = receiptName;
this.downloadLinkElement.nativeElement.click();

// device shareing
await Filesystem.writeFile({
path: receiptName,
data: base64Data,
directory: Directory.Cache
});

let fileResult = await Filesystem.getUri({
directory: Directory.Cache,
path: receiptName
});
let imageLink = Capacitor.convertFileSrc(fileResult.uri);
Share.share({
title: receiptName,
text: receiptName,
url: fileResult.uri,
})
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing ::: ', error));
}

Answer 3

尝试使用files:[]属性，如果您想通过电子邮件、instagram或whatsapp发送图像等二进制文件，此代码可能会有所帮助我的电容器版本4.x

import { Share } from '@capacitor/share';

shareImage() {
try {
//1. get image as base64
// this function just downloads the file from link and converts to base64
const b64image = await this._mediaUploadService.downloadImage(this.selectedImages[0]) as string;


//2.  save file in cache
await Filesystem.writeFile({
path: this.selectedImages[0],
data: b64image,
directory: Directory.Cache
});

//3. get full uri of the saved image
let imgData = await Filesystem.getUri({
path: this.selectedImages[0],
directory: Directory.Cache
});
// share using @capacitor/share plugin
Share.share({
text: "hello",
dialogTitle: "Share via",
files: [imgData.uri],
});
} catch (e) {
console.error(e);
}
}