Security (Vue)
The sample demonstrates how to export FlexGrid content to password-protected PDF file and how to set PDF file permissions.
The sample uses wijmo.pdf.security module to enhance wijmo.pdf with security capabilities.
The IFlexGridExportSettings' documentOptions property is used to provide security settings, such as userPassword and permissions, to the underlying PdfDocument.
Learn about FlexGrid | FlexGrid API Reference
This example uses Vue.
app.vue
index.html
data.js
Copy to CodeMine
<template>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading">
Security settings
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="User password"
v-model="opts.userPassword" />
</div>
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="Owner password"
v-model="opts.ownerPassword" />
</div>
</div>
<hr />
<div class="row">
<div class="col-sm-3">
<wj-menu :value="opts.version" :header="'PDF version'" :itemClicked="versionChanged">
<wj-menu-item :value="PdfVersionEnum.v1_3">1.3</wj-menu-item>
<wj-menu-item :value="PdfVersionEnum.v1_4">1.4</wj-menu-item>
<wj-menu-item :value="PdfVersionEnum.v1_5">1.5</wj-menu-item>
<wj-menu-item :value="PdfVersionEnum.v1_6">1.6</wj-menu-item>
<wj-menu-item :value="PdfVersionEnum.v1_7">1.7</wj-menu-item>
<wj-menu-item :value="PdfVersionEnum.v1_7Ext3">1.7 ExtensionLevel 3</wj-menu-item>
</wj-menu>
</div>
</div>
<hr />
<div class="row">
<div class="col">
<b>Permissions</b> (require owner password)
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="checkbox">
<label>
<input type="checkbox" v-model="opts.permissions.annotating" />Annotating
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"
v-model="opts.permissions.contentAccessibility" />ContentAccessibility
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" v-model="opts.permissions.copying" />Copying
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" v-model="opts.permissions.documentAssembly" />DocumentAssembly
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" v-model="opts.permissions.fillingForms" />FillingForms
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" v-model="opts.permissions.modifying" />Modifying
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">Printing</div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="radio-inline">
<input name="printing" type="radio" :value="PdfPrintPermissionEnum.NotAllowed"
v-model="opts.permissions.printing" checked />NotAllowed
</label>
<label class="radio-inline">
<input name="printing" type="radio" :value="PdfPrintPermissionEnum.AllowLowResolution"
v-model="opts.permissions.printing" />AllowLowResolution
</label>
<label class="radio-inline">
<input name="printing" type="radio" :value="PdfPrintPermissionEnum.AllowHighResolution"
v-model="opts.permissions.printing" />AllowHighResolution
</label>
</div>
</div>
</div>
</div>
<!-- Export button -->
<button class="btn btn-default" @click="exportPdf">Export</button>
<!-- FlexGrid -->
<wj-flex-grid class="grid" :autoGenerateColumns=false selectionMode="ListBox" headersVisibility="All"
:itemsSource="data" :initialized="initializeGrid">
<wj-flex-grid-column header="ID" binding="id"></wj-flex-grid-column>
<wj-flex-grid-column header="Start Date" binding="start" format="d"></wj-flex-grid-column>
<wj-flex-grid-column header="End Date" binding="end" format="d"></wj-flex-grid-column>
<wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
</wj-flex-grid>
</div>
</template>
<script setup>
import { PdfVersion, PdfPrintPermission } from "@mescius/wijmo.pdf";
import { FlexGridPdfConverter } from "@mescius/wijmo.grid.pdf";
import "@mescius/wijmo.pdf.security";
import { getData } from "./data";
import { ref } from "vue";
const PdfVersionEnum = ref(PdfVersion);
const PdfPrintPermissionEnum = ref(PdfPrintPermission);
const data = ref(getData(10));
const opts = ref({
userPassword: undefined,
ownerPassword: undefined,
version: PdfVersion.v1_3,
permissions: {
annotating: false,
contentAccessibility: false,
copying: false,
documentAssembly: false,
fillingForms: false,
modifying: false,
printing: PdfPrintPermission.NotAllowed,
},
});
const flexGrid = ref(null);
function initializeGrid(ctl) {
flexGrid.value = ctl;
}
function exportPdf() {
let p = opts.value.permissions,
settings = {
documentOptions: {
userPassword: opts.value.userPassword,
ownerPassword: opts.value.ownerPassword,
version: opts.value.version,
permissions: {
annotating: p.annotating,
contentAccessibility: p.contentAccessibility,
copying: p.copying,
documentAssembly: p.documentAssembly,
fillingForms: p.fillingForms,
modifying: p.modifying,
printing: p.printing,
},
},
styles: {
cellStyle: {
backgroundColor: "#ffffff",
borderColor: "#c6c6c6",
},
altCellStyle: {
backgroundColor: "#f9f9f9",
},
groupCellStyle: {
backgroundColor: "#dddddd",
},
headerCellStyle: {
backgroundColor: "#eaeaea",
},
},
};
//
FlexGridPdfConverter.export(flexGrid.value, "FlexGrid.pdf", settings);
}
function versionChanged(sender) {
if (sender.selectedValue) {
opts.value.version = sender.selectedValue;
}
}
</script>
<style>
body {
margin-bottom: 24px;
}
.grid {
margin-top: 20px;
height: 300px;
}
</style>Feedback
Submit and view feedback for