Summary: - Supports multi-page printing with some aggressive css overrides. - Relies on a new function implemented by grist-plugin-api to print a multi-page CustomView. - Renders all rows for printing for scrolly-based views. Test Plan: Doesn't seem possible to do a selenium test for printing. Tested manually on Chrome, Firefox, and Safari. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2635pull/6/head
Dmitry S
4 years ago
parent
d2ad5edc46
commit
99ab09651e
@ -0,0 +1,60 @@
|
||||
@media print {
|
||||
/* Various style overrides needed to print a single section (page widget). */
|
||||
|
||||
.print-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.print-parent {
|
||||
display: block !important;
|
||||
position: relative !important;
|
||||
height: max-content !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.print-widget {
|
||||
margin: 0px !important;
|
||||
}
|
||||
|
||||
.print-widget .viewsection_title {
|
||||
display: none !important;
|
||||
}
|
||||
.print-widget .view_data_pane_container {
|
||||
border: none !important;
|
||||
}
|
||||
.print-widget .viewsection_content {
|
||||
margin: 0px !important;
|
||||
}
|
||||
|
||||
.print-widget .detailview_single {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.print-widget .gridview_data_pane {
|
||||
display: block !important;
|
||||
position: relative !important;
|
||||
height: max-content !important;
|
||||
overflow: visible !important;
|
||||
border-top: 1px solid var(--grist-color-dark-grey);
|
||||
border-left: 1px solid var(--grist-color-dark-grey);
|
||||
}
|
||||
|
||||
.print-widget .gridview_data_scroll {
|
||||
position: relative !important;
|
||||
height: max-content !important;
|
||||
}
|
||||
|
||||
.print-widget .scrolly_outer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.print-widget .custom_view {
|
||||
height: calc(100vh - 24px);
|
||||
}
|
||||
}
|
||||
|
||||
@media not print {
|
||||
.print-all-rows {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,108 @@
|
||||
import {CustomView} from 'app/client/components/CustomView';
|
||||
import {DataRowModel} from 'app/client/models/DataRowModel';
|
||||
import * as DataTableModel from 'app/client/models/DataTableModel';
|
||||
import {ViewSectionRec} from 'app/client/models/DocModel';
|
||||
import {dom} from 'grainjs';
|
||||
|
||||
type RowId = number|'new';
|
||||
|
||||
/**
|
||||
* Print the specified viewSection (aka page widget). We use the existing view instance rather
|
||||
* than render a new one, since it may have state local to this instance view, such as current
|
||||
* filters.
|
||||
*
|
||||
* Views get a chance to render things specially for printing (which is needed when they use
|
||||
* scrolly for normal rendering).
|
||||
*
|
||||
* To let an existing view print across multiple pages, we can't have it nested in a flexbox or a
|
||||
* div with 'height: 100%'. We achieve it by forcing all parents of our view to have a simple
|
||||
* layout. This is potentially fragile.
|
||||
*/
|
||||
export async function printViewSection(layout: any, viewSection: ViewSectionRec) {
|
||||
const viewInstance = viewSection.viewInstance.peek();
|
||||
const sectionElem = viewInstance?.viewPane?.closest('.viewsection_content');
|
||||
if (!sectionElem) {
|
||||
throw new Error("No page widget to print");
|
||||
}
|
||||
if (viewInstance instanceof CustomView) {
|
||||
try {
|
||||
await viewInstance.triggerPrint();
|
||||
return;
|
||||
} catch (e) {
|
||||
// tslint:disable-next-line:no-console
|
||||
console.warn(`Failed to trigger print in CustomView: ${e}`);
|
||||
// continue on to trying to print from outside, which should work OK for a single page.
|
||||
}
|
||||
}
|
||||
|
||||
function prepareToPrint(onOff: boolean) {
|
||||
// Hide all layout boxes that do NOT contain the section to be printed.
|
||||
layout.forEachBox((box: any) => {
|
||||
if (!box.dom.contains(sectionElem)) {
|
||||
box.dom.classList.toggle('print-hide', onOff);
|
||||
}
|
||||
});
|
||||
|
||||
// Mark the section to be printed.
|
||||
sectionElem.classList.toggle('print-widget', onOff);
|
||||
|
||||
// Let the view instance update its rendering, e.g. to render all rows when scrolly is in use.
|
||||
viewInstance?.prepareToPrint(onOff);
|
||||
|
||||
// If .print-all-rows element is present (created for scrolly-based views), use it as the
|
||||
// start element for the loop below, to ensure it's rendered flexbox-free.
|
||||
const keyElem = sectionElem.querySelector('.print-all-rows') || sectionElem;
|
||||
|
||||
// Go through all parents of the element to be printed. For @media print, we override their
|
||||
// layout in a heavy-handed way, forcing them all to be non-flexbox and sized to content,
|
||||
// since our normal flexbox-based layout is sized to screen and would not print multiple pages.
|
||||
let elem = keyElem.parentElement;
|
||||
while (elem) {
|
||||
elem.classList.toggle('print-parent', onOff);
|
||||
elem = elem.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
const sub1 = dom.onElem(window, 'beforeprint', () => prepareToPrint(true));
|
||||
const sub2 = dom.onElem(window, 'afterprint', () => {
|
||||
sub1.dispose();
|
||||
sub2.dispose();
|
||||
// To debug printing, set window.debugPringint=1 in the console, then print a section, dismiss
|
||||
// the print dialog, switch to "@media print" emulation, and you can explore the styles. You'd
|
||||
// need to reload the page to do it again.
|
||||
if (!(window as any).debugPrinting) {
|
||||
prepareToPrint(false);
|
||||
}
|
||||
});
|
||||
|
||||
window.print();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Produces a div with all requested rows using the same renderRow() function as used with scrolly
|
||||
* for dynamically rendered views. This is used for printing, so these rows do not subscribe to
|
||||
* data.
|
||||
*
|
||||
* To avoid creating a lot of subscriptions when rendering rows this way, we render one DOM row at
|
||||
* a time, copy the produced HTML, and dispose the produced DOM.
|
||||
*/
|
||||
export function renderAllRows(
|
||||
tableModel: DataTableModel, rowIds: RowId[], renderRow: (r: DataRowModel) => Element,
|
||||
) {
|
||||
const rowModel = tableModel.createFloatingRowModel(null) as DataRowModel;
|
||||
const html: string[] = [];
|
||||
rowIds.forEach((rowId, index) => {
|
||||
if (rowId !== 'new') {
|
||||
rowModel._index(index);
|
||||
rowModel.assign(rowId);
|
||||
const elem = renderRow(rowModel);
|
||||
html.push(elem.outerHTML);
|
||||
dom.domDispose(elem);
|
||||
}
|
||||
});
|
||||
rowModel.dispose();
|
||||
const result = dom('div.print-all-rows');
|
||||
result.innerHTML = html.join("\n");
|
||||
return result;
|
||||
}
|
||||
Loading…
Reference in new issue